<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>