1369954-1.xhtml - mozsearch

Enable keyboard shortcuts

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <style>

      div > span { color: green; }

      p > span { color: red !important; }

      p { color: purple }

    </style>

    <script>

      customElements.define("custom-div", class extends HTMLDivElement {

        constructor() {

          super();

          this.attachShadow({ mode: "open" });

          let style = document.createElement("style");

          style.textContent = "p > span { color: red; } p { color: purple }";

          let span = document.createElement("span");

          span.textContent = "This should not be green";

          let p = document.createElement("p");

          p.append(document.createElement("slot"));

          this.shadowRoot.append(style, span, p);

      }, {

        extends: "div",

});

    </script>

  </head>

  <body>

    <div is="custom-div">

      <span>This should be green</span><br/>

      <b>This should be purple</b>

    </div>

  </body>

</html>