386310-1b-shadow.html (649B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="386310-script.js"></script> 5 <script> 6 customElements.define("custom-element", class extends HTMLElement { 7 constructor() { 8 super(); 9 const template = document.getElementById("template"); 10 const shadowRoot = this.attachShadow({mode: "open"}) 11 .appendChild(template.content.cloneNode(true)); 12 } 13 }); 14 </script> 15 </head> 16 <body> 17 <template id="template"> 18 <span></span> 19 <slot></slot> 20 </template> 21 <custom-element id="test" style="display: block;">first second third [fourth]</custom-element> 22 </body> 23 </html>