Skip to content

feat(core): support bootstrapping Angular components underneath shadow roots #66782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dgp1130 wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat(core): support bootstrapping Angular components underneath shadow roots #66782

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8258e33
refactor(core): move `SharedStylesHost` interface into `@angular/core…
dgp1130 Jan 28, 2026
37574fd
refactor(core): add `getRootNode` to `RNode` interface
dgp1130 Feb 19, 2026
38602a9
refactor(core): track multiple usages of a single host in `SharedStyl…
dgp1130 Feb 24, 2026
294d578
refactor(core): add `MockSharedStylesHost`
dgp1130 Feb 26, 2026
a1ba01e
fix(core): ensure `ViewRef.prototype.destroy` is idempotent
dgp1130 Mar 25, 2026
cf94a8e
feat(core): support bootstrapping Angular components underneath shado…
dgp1130 Jan 28, 2026
1ccb813
refactor(platform-browser): avoid `SharedStylesHost` modifications af…
dgp1130 Mar 19, 2026
16c49c9
refactor(core): preserve `document` context via `fallbackDocument` in…
dgp1130 Mar 19, 2026
a89baf0
refactor(platform-browser): avoid duplicate styles when re-adding a h…
dgp1130 Mar 25, 2026
5b5a4f0
test: verify that Angular supports bootstrapping under shadow roots
dgp1130 Jan 28, 2026
17f2628
test(core): add test validating that component destroy does not depen…
dgp1130 Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(platform-browser): avoid SharedStylesHost modifications af… 
…ter destruction

Since `SharedStylesHost` can receive `addHost` and `removeHost` calls after it is destroyed in testing environments (e.g., when fakeAsync triggers CD after teardown), we need to safely no-op these operations to avoid errors.
  • Loading branch information
@dgp1130
dgp1130 committed Mar 28, 2026
commit 1ccb813c45922d14b81c4d192d525c40ff84291b
16 changes: 16 additions & 0 deletions packages/platform-browser/src/dom/shared_styles_host.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,9 @@ export class SharedStylesHost implements ɵSharedStylesHost, OnDestroy {
*/
private readonly hosts = new Map<Node, number>();

/** Whether this instance has been destroyed. */
private destroyed = false;

constructor(
@Inject(DOCUMENT) private readonly doc: Document,
@Inject(APP_ID) private readonly appId: string,
Expand Down Expand Up @@ -202,9 +205,16 @@ export class SharedStylesHost implements ɵSharedStylesHost, OnDestroy {
removeElements(elements);
}
this.hosts.clear();
this.destroyed = true;
}

addHost(hostNode: Node): void {
// Adding a host after destruction will have no effect and is likely a bug in the caller.
// However, some testing scenarios with fake async appear to trigger CD after `TestBed`
// teardown, meaning Angular may render new components (and then immediately destroy them)
// after the application is destroyed, so we have to allow this to happen and no-op.
if (this.destroyed) return;

const existingUsage = this.hosts.get(hostNode) ?? 0;
if (existingUsage === 0) {
Copy link
Copy Markdown
Member

@mattrbeck mattrbeck Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpicking: Can we move the this.hosts.set(hostNode, existingUsage + 1); up and invert this guard to reduce nesting?

// Add existing styles to new host
Expand All @@ -220,6 +230,12 @@ export class SharedStylesHost implements ɵSharedStylesHost, OnDestroy {
}

removeHost(hostNode: Node): void {
// In some scenarios (such as an explicit `ApplicationRef.prototype.destroy` call),
// this instance's `ngOnDestroy` method may be called before a component is destroyed and
// attempts to remove its own styles. In this case, we need to no-op to avoid throwing an
// error.
if (this.destroyed) return;

const usage = this.hosts.get(hostNode);
if (typeof ngDevMode !== 'undefined' && ngDevMode && usage === undefined) {
Comment thread
dgp1130 marked this conversation as resolved.
throw new Error('Attempted to remove a host which was not added.');
Expand Down
17 changes: 17 additions & 0 deletions packages/platform-browser/test/dom/shared_styles_host_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,4 +184,21 @@ describe('SharedStylesHost', () => {
expect(doc.head.innerHTML).not.toContain('ng-app-id');
});
});

describe('destroy', () => {
it('should ignore `addHost` and `removeHost` calls after destruction', () => {
ssh.addStyles(['a {};']);
ssh.addHost(someHost);
expect(someHost.innerHTML).toEqual('<style>a {};</style>');

ssh.ngOnDestroy();
expect(someHost.innerHTML).toEqual('');

// These should be no-ops instead of crashing or modifying things.
expect(() => void ssh.addHost(someHost)).not.toThrow();
expect(someHost.innerHTML).toEqual('');
expect(() => void ssh.removeHost(someHost)).not.toThrow();
expect(someHost.innerHTML).toEqual('');
});
});
});