Theme editor won't work with declarative shadow dom

Online Store and Theme Development
1

Short description of issue

Theme editor won’t work with declarative shadow DOM

Reproduction steps

Create a section with a minimal code using declarative shadow dom, such as:

<x-foo>
  <template shadowrootmode="open">
    <slot name="foo"></foo>
  </template>

  <p slot="foo">Hello</p>
</x-foo>

When editing a setting in the section, the theme editor will reload the section and apparenlty uses innerHTML to replace the section. However, this causes an issue when using declarative shadow dom.

Additional info

To imrpove support of declarative shadow dom, Shopify should use setHTMLUnsafe when available instead of innerHTML.

What type of topic is this

Bug report

Upload screenshot(s) of issue

Capture d’écran 2026-03-17 à 16.45.31.png

2

Hi @bakura10

Thanks for flagging - I’m digging into this now.

3

Thanks @Liam-Shopify

Due to how theme blocks don’t have information about their siblings, using shadow dom is the only way to create complex HTML with slots, so without proper support for Shadow DOM the experience for merchants will be extremely bad (in our next theme we’re using declarative shadow DOM extensively, so we would appreciate it to be supported).

4

For information @Liam-Shopify this also fails to work in the visual preview mode, which also prevents to have any kind of visual preview when using declarative shadow dom :(.