RavaJS is a small library that allows you to define a component that is bound to elements using a CSS selector. This binding is dynamic so that you may define a component at any point and it will effect existing and future matching elements.

## How to start

#### Setup

    <script src="https://cdn.jsdelivr.net/npm/rava@2.1.1/dist/rava.min.js"></script>

#### Usage

Now you can use css selectors to find html elements and add new functionality

    rava.bind('rava-time',{
        callbacks:{
            created: function(){
                this.start();
            }
        },
        methods : {
            start : function() {
                this.tick();
                this.__timeInterval = setInterval(this.tick,1000);
            },
            stop : function() {
                this.__timeInterval = clearInterval(this.__timeInterval);
            },
            tick : function() {
                this.textContent = new Date().toLocaleTimeString();
            }
        },
        events : {
            click : function() {
                if (this.__timeInterval){
                    this.stop();
                } else {
                    this.start();
                }
            }
        }
    });

Combined with some HTML

    <h2>"The time" she opined ,"is now <rava-time></rava-time>"</h2>

Creates

> ## "The time" she opined ,"is now "