DOMException: Failed to execute 'attachShadow' on 'Element'

🐞 bug report

Description

We have several Angular Elements projects that are working perfectly, but they all have this error in console:

DOMException: Failed to execute ‘attachShadow’ on ‘Element’: Shadow root cannot be created on a host which already hosts a shadow tree.

This seems to be a similar/related to this issue posted by @JenPeleva a year ago: https://github.com/angular/angular/issues/24397

I have tried the possible solutions online, but there is not much to go on, and there are only 5 results on google for this specific error message (soon to be 6).

We have been using: encapsulation: ViewEncapsulation.ShadowDom, in all our projects.

Changing to: encapsulation: ViewEncapsulation.Native, works too, but gives the same error in console.

Changing to: encapsulation: ViewEncapsulation.Emulated, removes the error, but then the whole app is gone, blank screen.

🔥 Exception or Error

ERROR DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
    at new ShadowDomRenderer (http://localhost:4005/vendor.js:109027:61)
    at DomRendererFactory2.createRenderer (http://localhost:4005/vendor.js:108735:24)
    at AnimationRendererFactory.createRenderer (http://localhost:4005/vendor.js:106454:40)
    at DebugRendererFactory2.createRenderer (http://localhost:4005/vendor.js:64671:49)
    at createComponentView (http://localhost:4005/vendor.js:63186:56)
    at callWithDebugContext (http://localhost:4005/vendor.js:64639:27)
    at Object.debugCreateComponentView [as createComponentView] (http://localhost:4005/vendor.js:63954:12)
    at createViewNodes (http://localhost:4005/vendor.js:63257:46)
    at createRootView (http://localhost:4005/vendor.js:63167:5)
    at callWithDebugContext (http://localhost:4005/vendor.js:64639:27)

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.9
Node: 10.15.2
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, platform-server

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.1.1
webpack                           4.29.0

Anything else relevant? Not sure if this worked before without the error, we have been working on these projects for months and only noticed this error recently without changing encapsulation…

[turbolego]

We found that some of our Angular Elements projects did not have this error while others did. The difference was in the app.module.ts file.

The solution to get rid of this error was the following:

1. Add this import: import { DoBootstrap } from '@angular/core';
2. Add the following:

entryComponents: [
    AppComponent
  ],

1. Set the following: bootstrap: [AppComponent] to: bootstrap: []
2. Change from:

export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define('selector-name-here', el);
  }
}

to:

export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {
    const el = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define('selector-name-here', el);
  }

  ngDoBootstrap() {
  }
}

We did not change anything else, and the projects that had this error before no longer have this error. The projects with this error worked and we only noticed this error when we looked in the console for something else. Why did the error occur?

Thanks! 😄

[Romanchuk]

Angular 9 Demo (see encaps.component): https://codesandbox.io/s/crazy-sun-4uo64