Turbo does not work with Declarative Shadow DOM

[KonnorRogers]

Turbo appears to leave template tags in place on navigation breaking components that use Declarative Shadow DOM.

2024-07-29.12-35-13.mp4

Reproduction: https://github.com/KonnorRogers/turbo-dsd-reproduction

[KonnorRogers]

This seems to work as a sort of "polyfill"

function fixDSD (e) {
  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream
  if (!newElement) { return }

  // https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
  ;(function attachShadowRoots(root) {
    root.querySelectorAll("template[shadowrootmode]").forEach(template => {
      const mode = template.getAttribute("shadowrootmode");
      const shadowRoot = template.parentNode.attachShadow({ mode });
      shadowRoot.appendChild(template.content);
      template.remove();
      attachShadowRoots(shadowRoot);
    });
  })(newElement);
}

;["turbo:before-render", "turbo:before-stream-render", "turbo:before-frame-render"].forEach((eventName) => {
  document.addEventListener(eventName, fixDSD)
})