1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  | class HelloSayerComponent extends HTMLElement {  
 |      constructor() {  
 |          super();  
 |    
 |          this.root = this.attachShadow({mode: "open"});  
 |    
 |          this.root.innerHTML = `  
 |              <style>  
 |                  span {  
 |                      background-color: coral;  
 |                      color: white;  
 |                  }  
 |              </style>  
 |              <span>Hello <slot></slot>!</span>  
 |          `;  
 |      }  
 |  }  
 |    
 |  window.customElements.define("hello-sayer", HelloSayerComponent);  
 |  
  |