<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> customElements.define("custom-div", class extends HTMLDivElement { constructor() { super(); this.attachShadow({ mode: "open" }); let p = document.createElement("p"); p.append(document.createElement("slot")); let span = document.createElement("span"); span.textContent = "This should not be green."; this.shadowRoot.append(p, span); } }, { extends: "div", }); </script> <style> span { color: red; } div.x > span { color: green; } </style> </head> <body onload="document.body.offsetTop; document.querySelector('div').className = 'x'"> <div is="custom-div"> <span>This should be green.</span> </div> </body> </html>