Declarative Shadow DOM Polyfill

declarative-shadow-dom.js

// From https://web.dev/declarative-shadow-dom/
// TODO do nothing in a browser that already supports declarative shadow DOM?
(function attachShadowRoots(root) {
  root.querySelectorAll("template[shadowroot]").forEach(template => {
    const mode = template.getAttribute("shadowroot");
    const shadowRoot = template.parentNode.attachShadow({ mode });
    shadowRoot.appendChild(template.content);
    template.remove();
    attachShadowRoots(shadowRoot);
  });
})(document);