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)
})

[sajuthankappan]

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)
})

Thanks for the "polyfill" @KonnorRogers . This is really helpful.

In the meanwhile, this issue seems still open, even in the latest version.

[alexandergitter]

Note that this is very likely due to how "conventional" methods of changing the DOM do not create declarative shadow roots.
E.g. creating a template via document.createElement("template") and setting the shadowrootmode attribute does not create a shadow root when attaching the element to the DOM. The same is true for setting some element's innerHTML. This is related to other security considerations, with innerHTML not executing <script> elements for example.

For this to work, rendering would need to use setHTMLUnsafe or parseHTMLUnsafe. Maybe it's possible to hook into Turbo (https://turbo.hotwired.dev/handbook/drive#custom-rendering) and use these to make DSD elements work?

For reference see:
https://web.dev/articles/declarative-shadow-dom#parser-only
https://fullystacked.net/innerhtml-alternatives/
https://thathtml.blog/2024/01/dsd-safety-with-set-html-unsafe/
https://github.com/WICG/sanitizer-api/ (rendered draft: https://wicg.github.io/sanitizer-api/)