[Quest]: Proper ShadowDOM support

[NullVoxPopuli]

Goal:

• support rending in to a shadow-dom
• be able to render in to a shadow-dom in a single render pass (the current way to get around limitations in ember/glimmer to render in to a shadow requires an extra render pass as well as an extra couple elements)

Potentially make this work:

const Shadowed = 
  <template shadowmoderoot="open">

  </template>;

export default
  <template>
    <Shadowed>
      
    </Shadowed>
  </template>;

or, we update our content-tag parser to allow:

export default
  <template>
    <template shadowmoderoot="open">
      shadow dom!
    </template>
  </template>;

// representation:
template(`
   <template shadowmoderoot="open">
      shadow dom!
   </template>
`)

---

Currently, <template shadowrootmode="open"> is not allowed in template-tag:

• Add failing test for declarative shadow-dom embroider-build/content-tag#66

GlimmerVM doesn't render directly in to a shadow:

• [Bug] declarative ShadowDOM is unable to have content rendered in to it #20642
• [Bug] #in-element cannot directly render in to shadow-dom #20641
• [Bug] in-element cannot render into a document-fragment #20643
• Improve builtin shadow-dom workflow [add shadow node opcode] glimmerjs/glimmer-vm#1195 (closed due to being implemented in the GlimmerVM rewrite, Glimmer Next)

Related

• [Bug] Could not initialize ember app in shadow root node #19734

Regressions?

• action modifier doesn't fire when inside shadow root #18303 (resolved, but now no longer works, due to [Bug] #in-element cannot directly render in to shadow-dom #20641)

[lifeart]

Since updating parser is hard, we may try to workaround it on framework level.

I think we could start with a plugin to compile template-like notation to internal representation like:

{{#let (element "foo") as |foo|}}
   {{#in-element (shadow-proxy foo)}}
    content
   {{/if}}
{{/let}}

where shadow-proxy returns node.attachShadow({ mode: "open" });

"public" api may looks like:

<div>
  <html:template shadowmoderoot="open">
     My Shadow DOM inside DIV.
  </html:template>
</div>