test(core): test bootstrapping an application within a shadow root

dgp1130 · dgp1130 · commit 30dcb508e69a · 2025-12-19T10:35:19.000-08:00
This tests that Angular can bootstrap under a shadow root and correctly apply styles to that shadow root rather than the document `&lt;head&gt;` tag.
diff --git a/packages/platform-browser/test/dom/shadow_dom_spec.ts b/packages/platform-browser/test/dom/shadow_dom_spec.ts
@@ -8,7 +8,7 @@
 
 import {Component, NgModule, ViewEncapsulation} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {BrowserModule} from '../../index';
+import {BrowserModule, createApplication} from '../../index';
 import {expect} from '@angular/private/testing/matchers';
 import {isNode} from '@angular/private/testing';
 
@@ -23,6 +23,10 @@ describe('ShadowDOM Support', () => {
     TestBed.configureTestingModule({imports: [TestModule]});
   });
 
+  afterEach(() => {
+    for (const child of document.body.children) child.remove();
+  });
+
   it('should attach and use a shadowRoot when ViewEncapsulation.ShadowDom is set', () => {
     const compEl = TestBed.createComponent(ShadowComponent).nativeElement;
     expect(compEl.shadowRoot!.textContent).toEqual('Hello World');
@@ -81,6 +85,28 @@ describe('ShadowDOM Support', () => {
     expect(articleContent.assignedSlot).toBe(articleSlot);
     expect(articleSubcontent.assignedSlot).toBe(articleSlot);
   });
+
+  it('should support bootstrapping an application underneath a shadow root', async () => {
+    @Component({
+      selector: 'app-root',
+      template: `Hello world!`,
+      styles: `:host {color: red;}`,
+    })
+    class AppRoot {}
+
+    const container = document.createElement('div');
+    const shadowRoot = container.attachShadow({mode: 'open'});
+    const appRoot = document.createElement('my-app');
+    shadowRoot.appendChild(appRoot);
+    document.body.appendChild(container);
+
+    const appRef = await createApplication();
+    const componentRef = appRef.bootstrap(AppRoot, appRoot);
+
+    expect(getComputedStyle(componentRef.location.nativeElement).color).toBe('rgb(255, 0, 0)');
+
+    expect(document.head.innerHTML).not.toContain('<style>');
+  });
 });
 
 @Component({
