[BUGFIX]: ShadowDOM support

[NullVoxPopuli]

Previously: #21217

Part of #20644

Fixes: #20642

Fixes: #20641

Related:

• [BUGFIX] DocumentFragment support #21551
• [Bug] in-element cannot render into a document-fragment #20643

Not fixed here:

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

Browser Behavior (JSBin)

template + shadowrootmode

Demo

In-element

Demo

for fun, this is how small I could make the demo

Runnable here

import { template } from '@ember/template-compiler';
import { trackedObject } from '@ember/reactive/collections';

const a = trackedObject({ count: 0, increment: () => a.count++ });
const b = trackedObject({ count: 0, increment: () => b.count++ });

function shadow(mode) {
  const host = document.createElement('div');
  const shadowRoot = host.attachShadow({ mode });
  return { host, shadowRoot };
}

const shadowOpen = shadow('open');
const shadowClosed = shadow('closed'); 

<template>
  {{shadowOpen.host}}
  
  {{#in-element shadowOpen.shadowRoot}}
    <p>You have clicked the button {{a.count}} times.</p>
    <button type="button" onclick={{a.increment}}>Click</button>
  {{/in-element}}

  {{shadowClosed.host}}
  
  {{#in-element shadowClosed.shadowRoot}}
    <p>You have clicked the button {{b.count}} times.</p>
    <button type="button" onclick={{b.increment}}>Click</button>
  {{/in-element}}
</template>;

[github-actions]

📊 Size report

Tarball size — 1.2 MB → 1.2 MB

dist/dev   0.1%↑

File	Before (Size / Brotli)	After (Size / Brotli)
./packages/shared-chunks/api-{hash}.js	10 kB / 2.1 kB	192%↑29.3 kB / 219%↑6.8 kB
./packages/shared-chunks/rehydrate-{hash}.js	15.6 kB / 3.1 kB	1%↑15.7 kB / 2%↑3.2 kB
./packages/shared-chunks/simple-{hash}.js	847 B / 320 B	-44.9%↓467 B / -29.1%↓227 B
Total (Includes all files)	2.1 MB / 494 kB	0.1%↑2.1 MB / 0.2%↑494.9 kB

---

dist/prod   0.2%↑

File	Before (Size / Brotli)	After (Size / Brotli)
./packages/shared-chunks/api-{hash}.js	25.8 kB / 5.8 kB	12%↑28.8 kB / 16%↑6.7 kB
./packages/shared-chunks/rehydrate-{hash}.js	15.6 kB / 3.1 kB	1%↑15.7 kB / 2%↑3.2 kB
./packages/shared-chunks/simple-{hash}.js	847 B / 320 B	-44.9%↓467 B / -29.1%↓227 B
Total (Includes all files)	1.9 MB / 451.2 kB	0.2%↑1.9 MB / 0.2%↑452.1 kB

---

smoke-tests/v2-app-template/dist   0.3%↑

File	Before (Size / Brotli)	After (Size / Brotli)
./assets/api-{hash}.js	291.4 kB / 78.2 kB	0.3%↑292.3 kB / 0.3%↑78.4 kB
Total (Includes all files)	344.2 kB / 95.4 kB	0.3%↑345.1 kB / 0.2%↑95.6 kB

---

smoke-tests/v2-app-hello-world-template/dist   0.7%↑

File	Before (Size / Brotli)	After (Size / Brotli)
./assets/main-{hash}.js	134.9 kB / 37.6 kB	0.7%↑135.8 kB / 0.6%↑37.9 kB
Total (Includes all files)	135.3 kB / 37.8 kB	0.7%↑136.2 kB / 0.6%↑38 kB

_{🤖 This report was automatically generated by wyvox/pkg-size}

[NullVoxPopuli]

this is gross, but closed roots cannot be accessed after they're built otherwise

we also use this to mirror platform behavior where sibling <template> blocks are not allowed (first wins, subsequent inert)