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