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.
<script src="https://cdn.jsdelivr.net/npm/rava@2.1.1/dist/rava.min.js"></script>
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
"