Is there a polyfill for Declarative Shadow DOM?

posted on

Back to overview

Yes, kinda.

Building a polyfill for declarative shadow DOM is straightforward: you find all <template shadowrootmode> elements and convert them to attached Shadow Roots on their parent element.
That allows the web component to function in unsupported browsers but only when JavaScript is enabled and functioning.

(function attachShadowRoots(root) {
  // find all templates with a shadowrootmode attribute
  root.querySelectorAll("template[shadowrootmode]").forEach(template => {
    // get the mode: open or closed
    const mode = template.getAttribute("shadowrootmode");
    // attach a shadow to the component
    const shadowRoot = template.parentNode.attachShadow({ mode });
    // append the content in the template
    shadowRoot.appendChild(template.content);
    // remove the template
    template.remove();
    attachShadowRoots(shadowRoot);
  });
})(document);

You should see a 4px dotted blue border, even in Firefox.

Source: Declarative Shadow DOM

Back to overview