The broken promise of Web Components(dmitriid.com)

    ['Hello', 'world'].map((text) => {
        return <p><span>{text}</span></p>
    })

    ['Hello', 'world'].forEach(text => {
    	const p = document.createElement('p')
    	const span = document.createElement('span')
    	span.textContent(text)
    	p.appendChild(span)
	
    	MyComponent.appendChild(p)
    })

   .myComponent {
     prototype: MyComponent url(components/my.tis);
     color: red; 
     ...
   }

   class MyComponent : Element 
   {
     function attached() {
       // called when DOM element gets this class
       // a.k.a. DOM constructor

       // content initialization, if needed: 
       this.$content( <button.prev/> 
                      <button.next/> );
     } 
     function detached() {
       // called when DOM element looses this class
       // a.k.a. DOM destructor
     } 

     function method() {
        // some public method  
     } 
     property prop(v) {
        // some public property
        get { ... }  
        set { ... }
     } 

     event mousedown (evt) {
        // default mousedown event handler
     } 
     event mouseup (evt) {
        // default mouseup event handler
     } 

     event click $(button.next) {
        // click on its button.next
     } 
     event click $(button.prev) {
        // click on its button.prev
     } 

     // etc
   }

   <div.myComponent />  

  ['Hello', 'world'].forEach(('text') => {
	const p = document.createElement('p')
	const span = document.createElement('span')
	span.textContent(text)
	p.appendChild(span)

  MyComponent.appendChild(p)
  })`

  <text-breaker-upper>
   <p each={this.input_str as out_text}>
     <span>{out_text}</span>
   </p>

    <script>
       this.input_str = input.split(" ");
    </script>
  </text-breaker-upper>

  <text-breaker-upper
      input_str="Hello World">
  <text-breaker-upper>