Declarative Shadow DOM

Tuesday, 24 December 2024

The web platform continues to grow and features continue to land as baseline. One that I have been anticipating being widely supported across the latest browsers has been declarative shadow DOM. In essence, it enables Web Components to be server side rendered, and shown on the client without JavaScript. Checkout the example below where shadow DOM is used both declaratively with HTML and imperatively with JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Declarative Shadow DOM</title>
  </head>
  <body>
    <style>
      p {
        color: blue;
        border: dashed 0.0625rem red;
        padding: 1rem;
      }
    </style>
    <x-element>
      <template shadowrootmode="open">
        <style>
          h1 {
            color: red;
            border: dotted 0.0625rem blue;
            padding: 1rem;
          }
        </style>
        <h1>Welcome to x-element!</h1>
        <slot></slot>
      </template>
      <p>Hello slot one!</p>
    </x-element>
    <x-element><p>Hello slot two!</p></x-element>
    <script type="module">
      const tagName = "x-element";
      if (!customElements.get(tagName)) {
        customElements.define(
          tagName,
          class extends HTMLElement {
            constructor() {
              super();

              if (!this.shadowRoot) {
                const shadow = this.attachShadow({ mode: "open" });
                const previousShadowRoot =
                  document.querySelector(tagName)?.shadowRoot;

                if (previousShadowRoot) {
                  shadow.innerHTML = previousShadowRoot.innerHTML;
                }
              }
            }
          }
        );
      }

      const xApp = document.createElement(tagName);
      const paragraph = document.createElement("p");

      paragraph.append("Hello slot three!");
      xApp.append(paragraph);

      document.body.append(xApp);
    </script>
  </body>
</html>