[BUGFIX] Shadow DOM support — {{#in-element}} with ShadowRoot/DocumentFragment and declarative shadow DOM via compiler

[Copilot]

• Fix Prettier formatting issue in shadow-dom.ts
• Remove unnecessary attachShadow guards from ShadowDOMSuite tests
• Add in-element-shadow-root.ts / in-element-document-fragment.ts test suites
• Improve element-builder.ts comment explaining the extra pop for shadow roots
• Fix querySelector('template') assertions in shadow-dom.ts
• Remove double cast in dom.ts
• Remove dead @tracked count = 0 from Counter class in shadow-dom.ts test 5
• Add true → false → true round-trip test that directly exercises the existingShadowRoot.replaceChildren() path in VM_ATTACH_SHADOW_ROOT_OP
• Add test for shadow root re-render driven by a component-owned @tracked property (no data passed to render()/rerender())
• Add re-render isolation test: two sibling components each with internal @tracked state rendered into the same shadow root; uses assert.step/assert.verifySteps to prove only the component whose state changed re-renders

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Quest]: Proper ShadowDOM support</issue_title>
<issue_description>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)</issue_description>

<agent_instructions>Explore ways to address some of the ergonomics issues presented in this issue</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Quest]: Proper ShadowDOM support #20644

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[NullVoxPopuli]

I think these tests are all good

[NullVoxPopuli]

these are good

[NullVoxPopuli]

@copilot since this test is changing state via rerender, we'll need another test that actually uses a tracked count + button that increments the property. no data should be passed in to render/rerender

[Copilot]

Done in afb21ff. Added '<template shadowrootmode="open"> as component root re-renders via internal @tracked property (no rerender args)' — the Counter class owns @tracked count = 0, the template uses {{this.count}}, nothing is passed to render() or rerender(). The test captures the instance, mutates instance.captured.count = 1, calls this.rerender() with no args, and asserts both the updated content and that the same shadow root instance is reused.

[NullVoxPopuli]

I extracted fragment support to here: #21253

because I want this PR more focused and easier to review