diff --git a/packages/@glimmer-workspace/integration-tests/lib/suites.ts b/packages/@glimmer-workspace/integration-tests/lib/suites.ts
index a3ecce2e83c..b3d576dad90 100644
--- a/packages/@glimmer-workspace/integration-tests/lib/suites.ts
+++ b/packages/@glimmer-workspace/integration-tests/lib/suites.ts
@@ -7,8 +7,11 @@ export * from './suites/entry-point';
 export * from './suites/has-block';
 export * from './suites/has-block-params';
 export * from './suites/in-element';
+export * from './suites/in-element-document-fragment';
+export * from './suites/in-element-shadow-root';
 export * from './suites/initial-render';
 export * from './suites/scope';
+export * from './suites/shadow-dom';
 export * from './suites/shadowing';
 export * from './suites/ssr';
 export * from './suites/with-dynamic-vars';
diff --git a/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-document-fragment.ts b/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-document-fragment.ts
new file mode 100644
index 00000000000..99e6a5d892a
--- /dev/null
+++ b/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-document-fragment.ts
@@ -0,0 +1,164 @@
+import { RenderTest } from '../render-test';
+import { test } from '../test-decorator';
+
+export class InElementDocumentFragmentSuite extends RenderTest {
+  static suiteName = '#in-element (DocumentFragment)';
+
+  @test
+  'Renders curlies into a detached DocumentFragment'() {
+    const fragment = document.createDocumentFragment();
+
+    this.render('{{#in-element this.fragment}}[{{this.foo}}]{{/in-element}}', {
+      fragment,
+      foo: 'Hello Fragment!',
+    });
+
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Hello Fragment!]',
+      'content rendered in document fragment'
+    );
+    this.assertHTML('<!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'Updated!' });
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Updated!]',
+      'content updated in document fragment'
+    );
+    this.assertHTML('<!---->');
+
+    this.rerender({ foo: 'Hello Fragment!' });
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Hello Fragment!]',
+      'content reverted in document fragment'
+    );
+    this.assertHTML('<!---->');
+  }
+
+  @test
+  'Renders curlies into a template.content fragment'() {
+    const templateEl = document.createElement('template');
+    const fragment = templateEl.content;
+
+    this.render('{{#in-element this.fragment}}[{{this.foo}}]{{/in-element}}', {
+      fragment,
+      foo: 'Hello Template Content!',
+    });
+
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Hello Template Content!]',
+      'content rendered in template.content fragment'
+    );
+    this.assertHTML('<!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'Updated!' });
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Updated!]',
+      'content updated in template.content fragment'
+    );
+    this.assertHTML('<!---->');
+
+    this.rerender({ foo: 'Hello Template Content!' });
+    this.assert.strictEqual(
+      fragment.textContent,
+      '[Hello Template Content!]',
+      'content reverted in template.content fragment'
+    );
+    this.assertHTML('<!---->');
+  }
+
+  @test
+  'Renders elements into a fragment that is later attached to the DOM'() {
+    const fragment = document.createDocumentFragment();
+    const container = document.createElement('div');
+
+    this.render('{{#in-element this.fragment}}<p id="frag-p">{{this.message}}</p>{{/in-element}}', {
+      fragment,
+      message: 'in fragment',
+    });
+
+    this.assert.strictEqual(
+      fragment.querySelector('#frag-p')?.textContent,
+      'in fragment',
+      'content rendered in detached fragment'
+    );
+    this.assertHTML('<!---->');
+
+    // Attach fragment's children to the DOM
+    container.appendChild(fragment);
+    this.assert.strictEqual(
+      container.querySelector('#frag-p')?.textContent,
+      'in fragment',
+      'content is in the DOM after fragment is appended'
+    );
+    // Fragment itself is now empty (children moved to container)
+    this.assert.strictEqual(fragment.childNodes.length, 0, 'fragment is empty after append');
+  }
+
+  @test
+  'Multiple in-element calls to the same DocumentFragment'() {
+    const fragment = document.createDocumentFragment();
+
+    this.render(
+      '{{#in-element this.fragment}}[{{this.foo}}]{{/in-element}}' +
+        '{{#in-element this.fragment insertBefore=null}}[{{this.bar}}]{{/in-element}}',
+      {
+        fragment,
+        foo: 'first',
+        bar: 'second',
+      }
+    );
+
+    this.assert.ok(fragment.textContent?.includes('[first]'), 'first block present in fragment');
+    this.assert.ok(fragment.textContent?.includes('[second]'), 'second block present in fragment');
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'updated-first', bar: 'updated-second' });
+    this.assert.ok(
+      fragment.textContent?.includes('[updated-first]'),
+      'first block updated in fragment'
+    );
+    this.assert.ok(
+      fragment.textContent?.includes('[updated-second]'),
+      'second block updated in fragment'
+    );
+    this.assertHTML('<!----><!---->');
+  }
+
+  @test
+  'Multiple in-element calls to the same DocumentFragment with insertBefore=null'() {
+    const fragment = document.createDocumentFragment();
+
+    this.render(
+      '{{#in-element this.fragment insertBefore=null}}<p id="a">{{this.foo}}</p>{{/in-element}}' +
+        '{{#in-element this.fragment insertBefore=null}}<p id="b">{{this.bar}}</p>{{/in-element}}',
+      {
+        fragment,
+        foo: 'first',
+        bar: 'second',
+      }
+    );
+
+    // Use childNodes to query into the fragment since querySelector doesn't work on detached fragment nodes in all browsers
+    const nodes = Array.from(fragment.childNodes);
+    const pA = nodes.find((n) => (n as Element).id === 'a') as HTMLElement | undefined;
+    const pB = nodes.find((n) => (n as Element).id === 'b') as HTMLElement | undefined;
+
+    this.assert.strictEqual(pA?.textContent, 'first', 'first block appended to fragment');
+    this.assert.strictEqual(pB?.textContent, 'second', 'second block appended to fragment');
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'updated-first', bar: 'updated-second' });
+    this.assert.strictEqual(pA?.textContent, 'updated-first', 'first block updated in fragment');
+    this.assert.strictEqual(pB?.textContent, 'updated-second', 'second block updated in fragment');
+    this.assertHTML('<!----><!---->');
+  }
+}
diff --git a/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-shadow-root.ts b/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-shadow-root.ts
new file mode 100644
index 00000000000..0d8678ac12a
--- /dev/null
+++ b/packages/@glimmer-workspace/integration-tests/lib/suites/in-element-shadow-root.ts
@@ -0,0 +1,256 @@
+import { GlimmerishComponent } from '../components/emberish-glimmer';
+import { RenderTest } from '../render-test';
+import { test } from '../test-decorator';
+
+export class InElementShadowRootSuite extends RenderTest {
+  static suiteName = '#in-element (ShadowRoot)';
+
+  @test
+  'Renders curlies into a ShadowRoot'() {
+    const hostElement = document.createElement('div');
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+
+    this.render('{{#in-element this.shadowRoot}}[{{this.foo}}]{{/in-element}}', {
+      shadowRoot,
+      foo: 'Hello Shadow!',
+    });
+
+    this.assert.strictEqual(
+      shadowRoot.textContent,
+      '[Hello Shadow!]',
+      'content rendered in shadow root'
+    );
+    this.assertHTML('<!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'Updated!' });
+    this.assert.strictEqual(shadowRoot.textContent, '[Updated!]', 'content updated in shadow root');
+    this.assertHTML('<!---->');
+
+    this.rerender({ foo: 'Hello Shadow!' });
+    this.assert.strictEqual(
+      shadowRoot.textContent,
+      '[Hello Shadow!]',
+      'content reverted in shadow root'
+    );
+    this.assertHTML('<!---->');
+  }
+
+  @test
+  'Class-based component with tracked property renders into shadow root without full DOM replacement on update'() {
+    const hostElement = document.createElement('div');
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+
+    class Counter extends GlimmerishComponent {}
+
+    this.registerComponent('Glimmer', 'Counter', '<p>Count: {{@count}}</p>', Counter as any);
+
+    this.render('{{#in-element this.shadowRoot}}<Counter @count={{this.count}} />{{/in-element}}', {
+      shadowRoot,
+      count: 0,
+    });
+
+    const p = shadowRoot.querySelector('p');
+    this.assert.ok(p !== null, 'p element rendered in shadow root');
+    this.assert.strictEqual(p?.textContent, 'Count: 0', 'initial count is 0');
+    this.assertHTML('<!---->');
+
+    this.rerender({ count: 1 });
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p')?.textContent,
+      'Count: 1',
+      'count updated to 1'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p'),
+      p,
+      'same <p> element reused (no full DOM replacement)'
+    );
+    this.assertHTML('<!---->');
+
+    this.rerender({ count: 42 });
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p')?.textContent,
+      'Count: 42',
+      'count updated to 42'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p'),
+      p,
+      'same <p> element still reused after second update'
+    );
+    this.assertHTML('<!---->');
+  }
+
+  @test
+  'Sibling components rendered into the same shadow root'() {
+    const hostElement = document.createElement('div');
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+
+    this.registerComponent('TemplateOnly', 'Header', '<h1>{{@title}}</h1>');
+    this.registerComponent('TemplateOnly', 'Body', '<p>{{@content}}</p>');
+
+    this.render(
+      '{{#in-element this.shadowRoot insertBefore=null}}<Header @title={{this.title}} />{{/in-element}}' +
+        '{{#in-element this.shadowRoot insertBefore=null}}<Body @content={{this.content}} />{{/in-element}}',
+      {
+        shadowRoot,
+        title: 'My Title',
+        content: 'My Content',
+      }
+    );
+
+    this.assert.strictEqual(
+      shadowRoot.querySelector('h1')?.textContent,
+      'My Title',
+      'Header component rendered in shadow root'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p')?.textContent,
+      'My Content',
+      'Body component rendered in shadow root'
+    );
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ title: 'Updated Title', content: 'Updated Content' });
+    this.assert.strictEqual(
+      shadowRoot.querySelector('h1')?.textContent,
+      'Updated Title',
+      'Header updated'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('p')?.textContent,
+      'Updated Content',
+      'Body updated'
+    );
+    this.assertHTML('<!----><!---->');
+  }
+
+  @test
+  'Sibling shadow roots each receive their own component'() {
+    const host1 = document.createElement('div');
+    const shadow1 = host1.attachShadow({ mode: 'open' });
+    const host2 = document.createElement('div');
+    const shadow2 = host2.attachShadow({ mode: 'open' });
+
+    this.registerComponent('TemplateOnly', 'Widget', '<span>{{@label}}</span>');
+
+    this.render(
+      '{{#in-element this.shadow1}}<Widget @label={{this.label1}} />{{/in-element}}' +
+        '{{#in-element this.shadow2}}<Widget @label={{this.label2}} />{{/in-element}}',
+      {
+        shadow1,
+        shadow2,
+        label1: 'Widget A',
+        label2: 'Widget B',
+      }
+    );
+
+    this.assert.strictEqual(
+      shadow1.querySelector('span')?.textContent,
+      'Widget A',
+      'Widget A rendered in shadow1'
+    );
+    this.assert.strictEqual(
+      shadow2.querySelector('span')?.textContent,
+      'Widget B',
+      'Widget B rendered in shadow2'
+    );
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ label1: 'Widget Alpha', label2: 'Widget Beta' });
+    this.assert.strictEqual(
+      shadow1.querySelector('span')?.textContent,
+      'Widget Alpha',
+      'Widget A label updated'
+    );
+    this.assert.strictEqual(
+      shadow2.querySelector('span')?.textContent,
+      'Widget Beta',
+      'Widget B label updated'
+    );
+    this.assertHTML('<!----><!---->');
+  }
+
+  @test
+  'Multiple in-element calls to the same shadow root'() {
+    const hostElement = document.createElement('div');
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+
+    // Without insertBefore=null, each in-element block manages its own bounded
+    // region inside the shadow root using comment markers.
+    this.render(
+      '{{#in-element this.shadowRoot}}[{{this.foo}}]{{/in-element}}' +
+        '{{#in-element this.shadowRoot insertBefore=null}}[{{this.bar}}]{{/in-element}}',
+      {
+        shadowRoot,
+        foo: 'first',
+        bar: 'second',
+      }
+    );
+
+    this.assert.ok(shadowRoot.textContent?.includes('[first]'), 'first in-element content present');
+    this.assert.ok(
+      shadowRoot.textContent?.includes('[second]'),
+      'second in-element content present'
+    );
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'updated-first', bar: 'updated-second' });
+    this.assert.ok(
+      shadowRoot.textContent?.includes('[updated-first]'),
+      'first in-element content updated'
+    );
+    this.assert.ok(
+      shadowRoot.textContent?.includes('[updated-second]'),
+      'second in-element content updated'
+    );
+    this.assertHTML('<!----><!---->');
+  }
+
+  @test
+  'Multiple in-element calls to the same shadow root with insertBefore=null'() {
+    const hostElement = document.createElement('div');
+    const shadowRoot = hostElement.attachShadow({ mode: 'open' });
+
+    // With insertBefore=null on both, both blocks append to the shadow root
+    this.render(
+      '{{#in-element this.shadowRoot insertBefore=null}}<p id="a">{{this.foo}}</p>{{/in-element}}' +
+        '{{#in-element this.shadowRoot insertBefore=null}}<p id="b">{{this.bar}}</p>{{/in-element}}',
+      {
+        shadowRoot,
+        foo: 'first',
+        bar: 'second',
+      }
+    );
+
+    this.assert.strictEqual(
+      shadowRoot.querySelector('#a')?.textContent,
+      'first',
+      'first block appended to shadow root'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('#b')?.textContent,
+      'second',
+      'second block appended to shadow root'
+    );
+    this.assertHTML('<!----><!---->');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'updated-first', bar: 'updated-second' });
+    this.assert.strictEqual(
+      shadowRoot.querySelector('#a')?.textContent,
+      'updated-first',
+      'first block updated'
+    );
+    this.assert.strictEqual(
+      shadowRoot.querySelector('#b')?.textContent,
+      'updated-second',
+      'second block updated'
+    );
+    this.assertHTML('<!----><!---->');
+  }
+}
diff --git a/packages/@glimmer-workspace/integration-tests/lib/suites/shadow-dom.ts b/packages/@glimmer-workspace/integration-tests/lib/suites/shadow-dom.ts
new file mode 100644
index 00000000000..2a04f8dc7f8
--- /dev/null
+++ b/packages/@glimmer-workspace/integration-tests/lib/suites/shadow-dom.ts
@@ -0,0 +1,409 @@
+import type { Dict, Owner } from '@glimmer/interfaces';
+
+import { castToBrowser } from '@glimmer/debug-util';
+
+import { GlimmerishComponent } from '../components/emberish-glimmer';
+import { RenderTest } from '../render-test';
+import { test } from '../test-decorator';
+import { tracked } from '../test-helpers/tracked';
+
+export class ShadowDOMSuite extends RenderTest {
+  static suiteName = 'Shadow DOM';
+
+  @test
+  'Renders content into shadow root via declarative shadow DOM (<template shadowrootmode="open">)'() {
+    // Render a template that uses declarative shadow DOM syntax.
+    // The <template shadowrootmode="open"> should cause Glimmer to attach a
+    // shadow root to the parent element and render children into it.
+    this.render('<div><template shadowrootmode="open"><p>{{this.message}}</p></template></div>', {
+      message: 'shadow content',
+    });
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.firstElementChild as HTMLElement | null;
+
+    this.assert.ok(host !== null, 'host element exists in DOM');
+    this.assert.ok(host?.shadowRoot !== null, 'shadow root is attached to host element');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'shadow content',
+      'shadow root contains the rendered content'
+    );
+  }
+
+  @test
+  'Shadow DOM content renders alongside regular DOM content'() {
+    this.render(
+      '<div><p>regular content</p><div><template shadowrootmode="open"><em>shadow content</em></template></div></div>'
+    );
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const outerDiv = rootEl.firstElementChild as HTMLElement | null;
+    const shadowHost = outerDiv?.querySelector('div') as HTMLElement | null;
+
+    this.assert.ok(outerDiv !== null, 'outer element exists');
+    this.assert.strictEqual(
+      outerDiv?.querySelector('p')?.textContent,
+      'regular content',
+      'regular content is rendered normally'
+    );
+
+    this.assert.ok(shadowHost?.shadowRoot !== null, 'shadow root is attached');
+    this.assert.strictEqual(
+      shadowHost?.shadowRoot?.querySelector('em')?.textContent,
+      'shadow content',
+      'shadow content is in shadow root'
+    );
+  }
+
+  @test
+  '<template shadowrootmode="open"> as component root renders into the parent element shadow root'() {
+    this.registerComponent(
+      'TemplateOnly',
+      'ShadowComp',
+      '<template shadowrootmode="open"><p>{{@message}}</p></template>'
+    );
+
+    // When the component root is <template shadowrootmode="open">, the shadow root is
+    // attached to the element that immediately contains the component (in this case, the
+    // <div class="host">).
+    this.render('<div class="host"><ShadowComp @message={{this.msg}} /></div>', {
+      msg: 'initial',
+    });
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.querySelector('.host') as HTMLElement | null;
+
+    this.assert.ok(host !== null, 'host element exists');
+    this.assert.ok(host?.shadowRoot !== null, 'shadow root is attached to the host element');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'initial',
+      'initial content rendered into shadow root'
+    );
+
+    this.assertStableRerender();
+
+    // Rerender with new arg — shadow root content should update
+    this.rerender({ msg: 'updated' });
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'updated',
+      'shadow root content updated after rerender'
+    );
+  }
+
+  @test
+  '<template shadowrootmode="open"> as component root re-renders correctly after full component recreation'() {
+    this.registerComponent(
+      'TemplateOnly',
+      'ShadowComp',
+      '<template shadowrootmode="open"><span>{{@label}}</span></template>'
+    );
+
+    // Wrap in a conditional so we can force component destruction + recreation
+    this.render(
+      '{{#if this.show}}<div class="host"><ShadowComp @label={{this.label}} /></div>{{/if}}',
+      { show: true, label: 'first' }
+    );
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const getHost = () => rootEl.querySelector('.host') as HTMLElement | null;
+
+    this.assert.ok(getHost()?.shadowRoot !== null, 'shadow root attached on first render');
+    this.assert.strictEqual(
+      getHost()?.shadowRoot?.querySelector('span')?.textContent,
+      'first',
+      'first render content correct'
+    );
+
+    // Remove the component from the DOM
+    this.rerender({ show: false, label: 'first' });
+    this.assert.strictEqual(getHost(), null, 'host element removed from DOM');
+
+    // Re-insert the component — the shadow root is on a fresh <div class="host">,
+    // so attachShadow should succeed on the new element
+    this.rerender({ show: true, label: 'second' });
+    this.assert.ok(getHost()?.shadowRoot !== null, 'shadow root attached on second render');
+    this.assert.strictEqual(
+      getHost()?.shadowRoot?.querySelector('span')?.textContent,
+      'second',
+      're-rendered content correct in shadow root'
+    );
+  }
+
+  @test
+  '<template shadowrootmode="open"> as component root with tracked state re-renders into same shadow root'() {
+    class Counter extends GlimmerishComponent {}
+
+    this.registerComponent(
+      'Glimmer',
+      'Counter',
+      '<template shadowrootmode="open"><p>{{@count}}</p></template>',
+      Counter as any
+    );
+
+    // Render the counter component with a wrapping div
+    this.render('<div class="host"><Counter @count={{this.count}} /></div>', { count: 0 });
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.querySelector('.host') as HTMLElement | null;
+
+    this.assert.ok(host?.shadowRoot !== null, 'shadow root attached');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      '0',
+      'initial count renders in shadow root'
+    );
+
+    // Update tracked state — shadow root should be reused (not recreated)
+    const shadowRootRef = host?.shadowRoot;
+    this.rerender({ count: 1 });
+
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      '1',
+      'count updated in shadow root'
+    );
+    this.assert.strictEqual(
+      host?.shadowRoot,
+      shadowRootRef,
+      'same shadow root instance reused (not recreated)'
+    );
+  }
+
+  @test
+  '<template shadowrootmode="open"> as component root re-renders via internal @tracked property (no rerender args)'() {
+    let instance = this.capture<Counter>();
+
+    class Counter extends GlimmerishComponent {
+      @tracked count = 0;
+
+      constructor(owner: Owner, args: Dict) {
+        super(owner, args);
+        instance.capture(this);
+      }
+    }
+
+    this.registerComponent(
+      'Glimmer',
+      'Counter',
+      '<template shadowrootmode="open"><p>{{this.count}}</p></template>',
+      Counter as any
+    );
+
+    // No data is passed to render — the count is owned entirely by the component
+    this.render('<div class="host"><Counter /></div>');
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.querySelector('.host') as HTMLElement | null;
+    const shadowRootRef = host?.shadowRoot;
+
+    this.assert.ok(shadowRootRef !== null, 'shadow root attached on first render');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      '0',
+      'initial count renders in shadow root'
+    );
+
+    // Mutate the tracked property directly — no data passed to rerender
+    instance.captured.count = 1;
+    this.rerender();
+
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      '1',
+      'count updated in shadow root after tracked mutation'
+    );
+    this.assert.strictEqual(
+      host?.shadowRoot,
+      shadowRootRef,
+      'same shadow root instance reused (not recreated) after tracked mutation'
+    );
+  }
+
+  @test
+  'two sibling shadow root components: only the updated component re-renders'() {
+    // Use closures so each component can call assert.step without needing access to the test
+    const assert = this.assert;
+
+    class ComponentA extends GlimmerishComponent {
+      @tracked value = 'a-initial';
+
+      constructor(owner: Owner, args: Dict) {
+        super(owner, args);
+        aInstance.capture(this);
+      }
+
+      get renderedValue() {
+        assert.step('component-a rendered');
+        return this.value;
+      }
+    }
+
+    class ComponentB extends GlimmerishComponent {
+      @tracked value = 'b-initial';
+
+      constructor(owner: Owner, args: Dict) {
+        super(owner, args);
+        bInstance.capture(this);
+      }
+
+      get renderedValue() {
+        assert.step('component-b rendered');
+        return this.value;
+      }
+    }
+
+    // Capture holders declared after the class definitions but before render,
+    // so TypeScript can resolve the type parameters.
+    const aInstance = this.capture<ComponentA>();
+    const bInstance = this.capture<ComponentB>();
+
+    this.registerComponent(
+      'Glimmer',
+      'ComponentA',
+      '<template shadowrootmode="open"><span class="a">{{this.renderedValue}}</span></template>',
+      ComponentA as any
+    );
+    this.registerComponent(
+      'Glimmer',
+      'ComponentB',
+      '<template shadowrootmode="open"><span class="b">{{this.renderedValue}}</span></template>',
+      ComponentB as any
+    );
+
+    this.render('<div class="host-a"><ComponentA /></div><div class="host-b"><ComponentB /></div>');
+
+    // Both rendered on initial render — consume those steps
+    this.assert.verifySteps(
+      ['component-a rendered', 'component-b rendered'],
+      'both components render initially'
+    );
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const hostA = rootEl.querySelector('.host-a') as HTMLElement | null;
+    const hostB = rootEl.querySelector('.host-b') as HTMLElement | null;
+
+    this.assert.strictEqual(
+      hostA?.shadowRoot?.querySelector('.a')?.textContent,
+      'a-initial',
+      'ComponentA initial value'
+    );
+    this.assert.strictEqual(
+      hostB?.shadowRoot?.querySelector('.b')?.textContent,
+      'b-initial',
+      'ComponentB initial value'
+    );
+
+    // Mutate only ComponentA — ComponentB must NOT re-render
+    aInstance.captured.value = 'a-updated';
+    this.rerender();
+
+    this.assert.strictEqual(
+      hostA?.shadowRoot?.querySelector('.a')?.textContent,
+      'a-updated',
+      'ComponentA updated after tracked mutation'
+    );
+    this.assert.strictEqual(
+      hostB?.shadowRoot?.querySelector('.b')?.textContent,
+      'b-initial',
+      'ComponentB unchanged'
+    );
+    this.assert.verifySteps(
+      ['component-a rendered'],
+      'only ComponentA re-renders when its tracked value changes'
+    );
+
+    // Mutate only ComponentB — ComponentA must NOT re-render
+    bInstance.captured.value = 'b-updated';
+    this.rerender();
+
+    this.assert.strictEqual(
+      hostA?.shadowRoot?.querySelector('.a')?.textContent,
+      'a-updated',
+      'ComponentA still unchanged'
+    );
+    this.assert.strictEqual(
+      hostB?.shadowRoot?.querySelector('.b')?.textContent,
+      'b-updated',
+      'ComponentB updated after tracked mutation'
+    );
+    this.assert.verifySteps(
+      ['component-b rendered'],
+      'only ComponentB re-renders when its tracked value changes'
+    );
+  }
+
+  @test
+  'conditional <template shadowrootmode="open"> inside a host element attaches shadow root when rendered'() {
+    this.render(
+      '<div class="host">{{#if this.useShadow}}<template shadowrootmode="open"><p>shadow content</p></template>{{else}}<div>regular content</div>{{/if}}</div>',
+      { useShadow: true }
+    );
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.querySelector('.host') as HTMLElement | null;
+
+    this.assert.ok(host !== null, 'host element exists');
+    this.assert.ok(host?.shadowRoot !== null, 'shadow root is attached when useShadow=true');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'shadow content',
+      'shadow content renders in shadow root'
+    );
+
+    // Switch to regular content branch
+    this.rerender({ useShadow: false });
+    // The shadow root persists on the host element (platform behavior), but Glimmer
+    // tears down the remote element block and renders <div>regular content</div>
+    // into the host's light DOM.
+    this.assert.strictEqual(
+      host?.querySelector('div')?.textContent,
+      'regular content',
+      'regular content renders in host after switching from shadow branch'
+    );
+  }
+
+  @test
+  'conditional <template shadowrootmode="open"> re-enables shadow root on toggle back (exercises existingShadowRoot path)'() {
+    // When a declarative shadow root block is torn down and re-created on the same
+    // host element, VM_ATTACH_SHADOW_ROOT_OP encounters rawParent.shadowRoot !== null
+    // (shadow roots cannot be removed from a host). The existingShadowRoot branch in
+    // the opcode clears and reuses the existing shadow root so that attachShadow() is
+    // not called again (which would throw DOMException).
+    this.render(
+      '<div class="host">{{#if this.useShadow}}<template shadowrootmode="open"><p>{{this.msg}}</p></template>{{else}}<span>off</span>{{/if}}</div>',
+      { useShadow: true, msg: 'first' }
+    );
+
+    const rootEl = castToBrowser(this.element, 'HTML');
+    const host = rootEl.querySelector('.host') as HTMLElement | null;
+    const initialShadowRoot = host?.shadowRoot;
+
+    this.assert.ok(initialShadowRoot !== null, 'shadow root attached on first render');
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'first',
+      'initial shadow content correct'
+    );
+
+    // Tear down the shadow DOM block — shadow root stays on the host (platform behavior)
+    this.rerender({ useShadow: false, msg: 'first' });
+    this.assert.ok(host?.querySelector('span') !== null, 'else branch rendered');
+
+    // Re-enable shadow DOM — VM_ATTACH_SHADOW_ROOT_OP hits the existingShadowRoot path
+    this.rerender({ useShadow: true, msg: 'second' });
+    this.assert.ok(host?.shadowRoot !== null, 'shadow root still attached after re-enable');
+    this.assert.strictEqual(
+      host?.shadowRoot,
+      initialShadowRoot,
+      'same shadow root instance reused (not recreated)'
+    );
+    this.assert.strictEqual(
+      host?.shadowRoot?.querySelector('p')?.textContent,
+      'second',
+      'shadow content updated correctly after re-enable'
+    );
+  }
+}
diff --git a/packages/@glimmer-workspace/integration-tests/test/jit-suites-test.ts b/packages/@glimmer-workspace/integration-tests/test/jit-suites-test.ts
index 69afb5a202c..0c9120466f2 100644
--- a/packages/@glimmer-workspace/integration-tests/test/jit-suites-test.ts
+++ b/packages/@glimmer-workspace/integration-tests/test/jit-suites-test.ts
@@ -5,10 +5,13 @@ import {
   GlimmerishComponents,
   HasBlockParamsHelperSuite,
   HasBlockSuite,
+  InElementDocumentFragmentSuite,
+  InElementShadowRootSuite,
   InElementSuite,
   jitComponentSuite,
   jitSuite,
   ScopeSuite,
+  ShadowDOMSuite,
   ShadowingSuite,
   TemplateOnlyComponents,
   WithDynamicVarsSuite,
@@ -18,6 +21,9 @@ import {
 jitComponentSuite(DebuggerSuite);
 jitSuite(EachSuite);
 jitSuite(InElementSuite);
+jitSuite(InElementDocumentFragmentSuite);
+jitSuite(InElementShadowRootSuite);
+jitSuite(ShadowDOMSuite);
 
 jitComponentSuite(GlimmerishComponents);
 jitComponentSuite(TemplateOnlyComponents);
diff --git a/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/statements.ts b/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/statements.ts
index 4968eec669b..a02cf5e0cad 100644
--- a/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/statements.ts
+++ b/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/statements.ts
@@ -86,6 +86,32 @@ class NormalizationStatements {
   }
 
   SimpleElement(element: ASTv2.SimpleElement, state: NormalizationState): Result<mir.Statement> {
+    // Detect declarative shadow DOM: <template shadowrootmode="open|closed">
+    // When Glimmer builds the DOM via createElement rather than parsing HTML, the browser's native
+    // declarative shadow DOM processing never fires. We handle it explicitly with a dedicated opcode.
+    if (element.tag.chars === 'template') {
+      const shadowrootmodeAttr = element.attrs.find(
+        (attr): attr is ASTv2.HtmlAttr =>
+          attr.type === 'HtmlAttr' && attr.name.chars === 'shadowrootmode'
+      );
+
+      if (shadowrootmodeAttr && ASTv2.isLiteral(shadowrootmodeAttr.value, 'string')) {
+        const mode = shadowrootmodeAttr.value.value;
+
+        if (mode === 'open' || mode === 'closed') {
+          return this.visitList(element.body, state).mapOk(
+            (body) =>
+              new mir.DeclarativeShadowRoot({
+                loc: element.loc,
+                guid: state.generateUniqueCursor(),
+                mode,
+                body: body.toArray(),
+              })
+          );
+        }
+      }
+    }
+
     return new ClassifiedElement(
       element,
       new ClassifiedSimpleElement(element.tag, element, hasDynamicFeatures(element)),
diff --git a/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/strict-mode.ts b/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/strict-mode.ts
index 2aa68ff2ded..f117680c522 100644
--- a/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/strict-mode.ts
+++ b/packages/@glimmer/compiler/lib/passes/1-normalization/visitors/strict-mode.ts
@@ -100,6 +100,9 @@ export default class StrictModeValidationPass {
 
       case 'InvokeComponent':
         return this.InvokeComponent(statement);
+
+      case 'DeclarativeShadowRoot':
+        return this.DeclarativeShadowRoot(statement);
     }
   }
 
@@ -268,6 +271,10 @@ export default class StrictModeValidationPass {
     return this.ElementParameters(statement.params).andThen(() => this.Statements(statement.body));
   }
 
+  DeclarativeShadowRoot(statement: mir.DeclarativeShadowRoot): Result<null> {
+    return this.Statements(statement.body);
+  }
+
   InvokeBlock(statement: mir.InvokeBlock): Result<null> {
     return this.Expression(statement.head, statement.head, COMPONENT_RESOLUTION)
       .andThen(() => this.Args(statement.args))
diff --git a/packages/@glimmer/compiler/lib/passes/2-encoding/content.ts b/packages/@glimmer/compiler/lib/passes/2-encoding/content.ts
index ee02943e774..ded76167797 100644
--- a/packages/@glimmer/compiler/lib/passes/2-encoding/content.ts
+++ b/packages/@glimmer/compiler/lib/passes/2-encoding/content.ts
@@ -69,6 +69,8 @@ export class ContentEncoder {
         return this.Component(stmt);
       case 'SimpleElement':
         return this.SimpleElement(stmt);
+      case 'DeclarativeShadowRoot':
+        return this.DeclarativeShadowRoot(stmt);
       case 'InElement':
         return this.InElement(stmt);
       case 'InvokeBlock':
@@ -137,6 +139,14 @@ export class ContentEncoder {
     ]);
   }
 
+  DeclarativeShadowRoot({
+    guid,
+    mode,
+    body,
+  }: mir.DeclarativeShadowRoot): WireFormat.Statements.ShadowRoot {
+    return [SexpOpcodes.ShadowRoot, [CONTENT.list(body), []], guid, mode];
+  }
+
   Component({ tag, params, args, blocks }: mir.Component): WireFormat.Statements.Component {
     let wireTag = EXPR.expr(tag);
     let wirePositional = CONTENT.ElementParameters(params);
diff --git a/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts b/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts
index cb10e013e8b..5e3d742aa02 100644
--- a/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts
+++ b/packages/@glimmer/compiler/lib/passes/2-encoding/mir.ts
@@ -120,6 +120,12 @@ export class SimpleElement extends node('SimpleElement').fields<{
   dynamicFeatures: boolean;
 }>() {}
 
+export class DeclarativeShadowRoot extends node('DeclarativeShadowRoot').fields<{
+  guid: string;
+  mode: string;
+  body: Statement[];
+}>() {}
+
 export class ElementParameters extends node('ElementParameters').fields<{
   body: AnyOptionalList<ElementParameter>;
 }>() {}
@@ -214,6 +220,7 @@ export type Statement =
   | AppendTextNode
   | Component
   | SimpleElement
+  | DeclarativeShadowRoot
   | InvokeBlock
   | AppendComment
   | If
diff --git a/packages/@glimmer/compiler/lib/wire-format-debug.ts b/packages/@glimmer/compiler/lib/wire-format-debug.ts
index ddd02880ca7..b4d7025913d 100644
--- a/packages/@glimmer/compiler/lib/wire-format-debug.ts
+++ b/packages/@glimmer/compiler/lib/wire-format-debug.ts
@@ -56,6 +56,9 @@ export default class WireFormatDebugger {
             opcode[3] ? this.formatOpcode(opcode[3]) : undefined,
           ];
 
+        case Op.ShadowRoot:
+          return ['shadow-root', opcode[3], opcode[2]];
+
         case Op.OpenElement:
           return ['open-element', inflateTagName(opcode[1])];
 
diff --git a/packages/@glimmer/constants/lib/syscall-ops.ts b/packages/@glimmer/constants/lib/syscall-ops.ts
index 22e49360b86..67ada544f26 100644
--- a/packages/@glimmer/constants/lib/syscall-ops.ts
+++ b/packages/@glimmer/constants/lib/syscall-ops.ts
@@ -58,6 +58,7 @@ import type {
   VmNot,
   VmOp,
   VmOpenDynamicElement,
+  VmAttachShadowRoot,
   VmOpenElement,
   VmPop,
   VmPopArgs,
@@ -187,7 +188,8 @@ export const VM_IF_INLINE_OP = 109 satisfies VmIfInline;
 export const VM_NOT_OP = 110 satisfies VmNot;
 export const VM_GET_DYNAMIC_VAR_OP = 111 satisfies VmGetDynamicVar;
 export const VM_LOG_OP = 112 satisfies VmLog;
-export const VM_SYSCALL_SIZE = 113 satisfies VmSize;
+export const VM_ATTACH_SHADOW_ROOT_OP = 113 satisfies VmAttachShadowRoot;
+export const VM_SYSCALL_SIZE = 114 satisfies VmSize;
 
 export function isOp(value: number): value is VmOp {
   return value >= 16;
diff --git a/packages/@glimmer/interfaces/lib/compile/wire-format/api.d.ts b/packages/@glimmer/interfaces/lib/compile/wire-format/api.d.ts
index 6db2138eb87..1130adc5ec3 100644
--- a/packages/@glimmer/interfaces/lib/compile/wire-format/api.d.ts
+++ b/packages/@glimmer/interfaces/lib/compile/wire-format/api.d.ts
@@ -47,6 +47,7 @@ import type {
   UndefinedOpcode,
   WithDynamicVarsOpcode,
   YieldOpcode,
+  ShadowRootOpcode,
 } from './opcodes.js';
 
 export type * from './opcodes.js';
@@ -300,6 +301,13 @@ export namespace Statements {
     blocks: Blocks | null,
   ];
 
+  export type ShadowRoot = [
+    op: ShadowRootOpcode,
+    block: SerializedInlineBlock,
+    guid: string,
+    mode: string,
+  ];
+
   /**
    * A Handlebars statement
    */
@@ -325,7 +333,8 @@ export namespace Statements {
     | Each
     | Let
     | WithDynamicVars
-    | InvokeComponent;
+    | InvokeComponent
+    | ShadowRoot;
 
   export type Attribute =
     | StaticAttr
diff --git a/packages/@glimmer/interfaces/lib/compile/wire-format/opcodes.d.ts b/packages/@glimmer/interfaces/lib/compile/wire-format/opcodes.d.ts
index 56781bbfffb..d3e75fea80f 100644
--- a/packages/@glimmer/interfaces/lib/compile/wire-format/opcodes.d.ts
+++ b/packages/@glimmer/interfaces/lib/compile/wire-format/opcodes.d.ts
@@ -64,6 +64,7 @@ export type NotOpcode = 51;
 export type IfInlineOpcode = 52;
 export type GetDynamicVarOpcode = 53;
 export type LogOpcode = 54;
+export type ShadowRootOpcode = 55;
 
 export type GetStartOpcode = GetSymbolOpcode;
 export type GetEndOpcode = GetFreeAsComponentHeadOpcode;
diff --git a/packages/@glimmer/interfaces/lib/vm-opcodes.d.ts b/packages/@glimmer/interfaces/lib/vm-opcodes.d.ts
index 53058efcddb..09bfb61d63c 100644
--- a/packages/@glimmer/interfaces/lib/vm-opcodes.d.ts
+++ b/packages/@glimmer/interfaces/lib/vm-opcodes.d.ts
@@ -111,7 +111,8 @@ export type VmIfInline = 109;
 export type VmNot = 110;
 export type VmGetDynamicVar = 111;
 export type VmLog = 112;
-export type VmSize = 113;
+export type VmAttachShadowRoot = 113;
+export type VmSize = 114;
 
 export type VmOp =
   | VmHelper
@@ -206,6 +207,7 @@ export type VmOp =
   | VmIfInline
   | VmNot
   | VmGetDynamicVar
-  | VmLog;
+  | VmLog
+  | VmAttachShadowRoot;
 
 export type SomeVmOp = VmOp | VmMachineOp;
diff --git a/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts b/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts
index 300fd5bf363..caeee379c61 100644
--- a/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts
+++ b/packages/@glimmer/opcode-compiler/lib/syntax/statements.ts
@@ -6,6 +6,7 @@ import type {
   WireFormat,
 } from '@glimmer/interfaces';
 import {
+  VM_ATTACH_SHADOW_ROOT_OP,
   VM_CLOSE_ELEMENT_OP,
   VM_COMMENT_OP,
   VM_COMPONENT_ATTR_OP,
@@ -291,6 +292,33 @@ STATEMENTS.add(SexpOpcodes.InElement, (op, [, block, guid, destination, insertBe
   );
 });
 
+STATEMENTS.add(SexpOpcodes.ShadowRoot, (op, [, block, guid, mode]) => {
+  // Push guid and insertBefore (always undefined for shadow roots) onto the stack,
+  // then call VM_ATTACH_SHADOW_ROOT_OP which attaches a shadow root to the current
+  // parent element and pushes a reference to it. Use ReplayableIf so that the whole
+  // sequence is re-evaluated on update and so that SSR (where attachShadow is unavailable)
+  // gracefully falls through without rendering into a shadow root.
+  ReplayableIf(
+    op,
+
+    () => {
+      expr(op, guid);
+      PushPrimitiveReference(op, undefined); // insertBefore
+      PushPrimitiveReference(op, mode); // 'open' | 'closed'
+      op(VM_ATTACH_SHADOW_ROOT_OP);
+      op(VM_DUP_OP, $sp, 0);
+
+      return 4;
+    },
+
+    () => {
+      op(VM_PUSH_REMOTE_ELEMENT_OP);
+      InvokeStaticBlock(op, block);
+      op(VM_POP_REMOTE_ELEMENT_OP);
+    }
+  );
+});
+
 STATEMENTS.add(SexpOpcodes.If, (op, [, condition, block, inverse]) =>
   ReplayableIf(
     op,
diff --git a/packages/@glimmer/runtime/lib/compiled/opcodes/dom.ts b/packages/@glimmer/runtime/lib/compiled/opcodes/dom.ts
index 9c0d378b123..cb117e06ea0 100644
--- a/packages/@glimmer/runtime/lib/compiled/opcodes/dom.ts
+++ b/packages/@glimmer/runtime/lib/compiled/opcodes/dom.ts
@@ -7,6 +7,7 @@ import type {
   ModifierInstance,
   Nullable,
   Owner,
+  SimpleElement,
   UpdatingOpcode,
   UpdatingVM,
 } from '@glimmer/interfaces';
@@ -14,6 +15,7 @@ import type { Reference } from '@glimmer/reference';
 import type { Revision, Tag } from '@glimmer/validator';
 import {
   CURRIED_MODIFIER,
+  VM_ATTACH_SHADOW_ROOT_OP,
   VM_CLOSE_ELEMENT_OP,
   VM_COMMENT_OP,
   VM_DYNAMIC_ATTR_OP,
@@ -29,16 +31,18 @@ import {
 } from '@glimmer/constants';
 import {
   check,
+  CheckDocumentFragment,
   CheckElement,
   CheckMaybe,
   CheckNode,
   CheckNullable,
+  CheckOr,
   CheckString,
 } from '@glimmer/debug';
 import { debugToString, expect } from '@glimmer/debug-util';
 import { associateDestroyableChild, destroy, registerDestructor } from '@glimmer/destroyable';
 import { getInternalModifierManager } from '@glimmer/manager';
-import { createComputeRef, isConstRef, valueForRef } from '@glimmer/reference';
+import { createComputeRef, createConstRef, isConstRef, valueForRef } from '@glimmer/reference';
 import { isIndexable } from '@glimmer/util';
 import { consumeTag, CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
 import { $t0 } from '@glimmer/vm';
@@ -74,7 +78,10 @@ APPEND_OPCODES.add(VM_PUSH_REMOTE_ELEMENT_OP, (vm) => {
   let insertBeforeRef = check(vm.stack.pop(), CheckReference);
   let guidRef = check(vm.stack.pop(), CheckReference);
 
-  let element = check(valueForRef(elementRef), CheckElement);
+  let element = check(
+    valueForRef(elementRef),
+    CheckOr(CheckElement, CheckDocumentFragment)
+  ) as SimpleElement;
   let insertBefore = check(valueForRef(insertBeforeRef), CheckMaybe(CheckNullable(CheckNode)));
   let guid = valueForRef(guidRef) as string;
 
@@ -120,6 +127,57 @@ APPEND_OPCODES.add(VM_POP_REMOTE_ELEMENT_OP, (vm) => {
   }
 });
 
+/**
+ * VM_ATTACH_SHADOW_ROOT_OP — declarative shadow DOM support.
+ *
+ * Pops the shadow root mode ('open' | 'closed') from the stack, then attaches
+ * a shadow root to the current parent element and pushes a const reference to
+ * it. The caller (via VM_PUSH_REMOTE_ELEMENT_OP) then uses that reference as
+ * the remote rendering target for the shadow root's children.
+ *
+ * Stack in (top → bottom):  mode, insertBefore, guid
+ * Stack out (top → bottom): shadowRoot ref, insertBefore, guid
+ *
+ * If the environment does not support shadow DOM (e.g. SSR with simple-dom),
+ * a null reference is pushed so that the surrounding ReplayableIf falls
+ * through without rendering any children.
+ */
+APPEND_OPCODES.add(VM_ATTACH_SHADOW_ROOT_OP, (vm) => {
+  const modeRef = check(vm.stack.pop(), CheckReference);
+  const mode = check(valueForRef(modeRef), CheckString) as ShadowRootMode;
+
+  // Get the current parent element from the element builder.
+  const rawParent = vm.tree().element as unknown as Element;
+
+  // Gracefully degrade in SSR/simple-dom environments that lack shadow DOM.
+  if (typeof rawParent.attachShadow !== 'function') {
+    vm.stack.push(createConstRef(null, false));
+    return;
+  }
+
+  // If an open shadow root already exists on this element (which happens when
+  // a component whose root is <template shadowrootmode="open"> re-renders into
+  // the same host element), reuse it after clearing its children.
+  let shadowRoot: ShadowRoot;
+  const existingShadowRoot = rawParent.shadowRoot;
+
+  if (existingShadowRoot) {
+    existingShadowRoot.replaceChildren();
+    shadowRoot = existingShadowRoot;
+  } else {
+    try {
+      shadowRoot = rawParent.attachShadow({ mode });
+    } catch {
+      // attachShadow can throw if the element already has a closed shadow root
+      // or is not a valid shadow host. Fall back gracefully.
+      vm.stack.push(createConstRef(null, false));
+      return;
+    }
+  }
+
+  vm.stack.push(createConstRef(shadowRoot, false));
+});
+
 APPEND_OPCODES.add(VM_FLUSH_ELEMENT_OP, (vm) => {
   let operations = check(vm.fetchValue($t0), CheckOperations);
   let modifiers: Nullable<ModifierInstance[]> = null;
diff --git a/packages/@glimmer/wire-format/lib/opcodes.ts b/packages/@glimmer/wire-format/lib/opcodes.ts
index 824348c763e..438aa22a220 100644
--- a/packages/@glimmer/wire-format/lib/opcodes.ts
+++ b/packages/@glimmer/wire-format/lib/opcodes.ts
@@ -34,6 +34,7 @@ import type {
   NotOpcode,
   OpenElementOpcode,
   OpenElementWithSplatOpcode,
+  ShadowRootOpcode,
   StaticArgOpcode,
   StaticAttrOpcode,
   StaticComponentAttrOpcode,
@@ -94,4 +95,5 @@ export const opcodes = {
   IfInline: 52 satisfies IfInlineOpcode,
   GetDynamicVar: 53 satisfies GetDynamicVarOpcode,
   Log: 54 satisfies LogOpcode,
+  ShadowRoot: 55 satisfies ShadowRootOpcode,
 } as const;