1371130-ref.xhtml (754B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <script> 4 customElements.define("custom-div", class extends HTMLDivElement { 5 constructor() { 6 super(); 7 this.attachShadow({ mode: "open" }); 8 9 let p = document.createElement("p"); 10 p.append(document.createElement("slot")); 11 let span = document.createElement("span"); 12 span.textContent = "This should not be green."; 13 this.shadowRoot.append(p, span); 14 } 15 }, { 16 extends: "div", 17 }); 18 </script> 19 <style> 20 span { color: red; } 21 div > span { color: green; } 22 </style> 23 </head> 24 <body> 25 <div is="custom-div"> 26 <span>This should be green.</span> 27 </div> 28 </body> 29 </html>