hyperElement

Example of hyperElement (hyperHTML+CustomElements)

by codemeasandwich

HTML

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/webcomponents.min.js"></script>
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>
<script src="https://unpkg.com/hyper-element@latest/source/bundle.js"></script>
<h3>
   Powered by: 
   <a href="https://www.npmjs.com/package/hyper-element" target="_blank">hyper-element</a>
</h3>

Time in UK: <my-time country="uk"/>

JavaScript

//=====================================================
//============================= Define: custome element
//=====================================================

class MyTime extends hyperElement{
			setup(onNext){
      
      		const Interval = setInterval(onNext(()=> new Date()),1000)
      
					return () => clearInterval(Interval);
      }
      render(Html,time){
        Html`
           <b>${
                 time.toLocaleTimeString(this.attrs.country)
          }</b>`
      }
 }

//=====================================================
//=========================== Register: custome element
//=====================================================

if(document.registerElement)
document.registerElement("my-time", MyTime)
else
window.customElements.define("my-time", MyTime)

//=====================================================
//================================================ Info
//=====================================================

console.log("Using", document.registerElement ? "registerElement" : "customElements.define")