title: Using CDK Overlay Container in ShadowDOM
body: <p>I am attempting to use Angular Material components inside of a web component. Everything is working except for one edge case with the cdk-overlays. So far I have had success using an override of _createContainer() to append the overlay container to a div inside of the shadowroot so that the styles will apply. However if I hide the parent element with an *ngIf and then toggle it back the overlay container is present in the DOM but it and its contained elements are not visible.</p>
  <p>Is there something I'm missing where I need to manually clear or toggle something to get that behavior to work correctly?</p>
  <p>Code is based off of this answer: <a href="https://stackoverflow.com/questions/52763285/add-matdialog-popup-to-angular-root-and-not-to-body">Add MatDialog popup to Angular Root and not to body</a></p>
  <pre><code>@Injectable({ providedIn: &quot;root&quot; })
  export class AppOverlayContainer extends OverlayContainer implements OnDestroy {
    constructor(@Inject(DOCUMENT) _document: any) {
      super(_document);
    }
  
    ngOnDestroy() {
      super.ngOnDestroy();
    }
  
    getRootElement(): Element {
      return this._document
        .querySelector(&quot;web-component-tag&quot;)
        .shadowRoot.querySelector(&quot;#angular-app-root&quot;);
    }
  
    createContainer(): void {
      this._createContainer();
    }
  
    protected _createContainer(): void {
      super._createContainer();
      this._appendToRootComponent();
    }
  
    private _appendToRootComponent(): void {
      if (!this._containerElement) {
       return;
      }
      const rootElement = this.getRootElement();
      const parent = rootElement || this._document.body;
      parent.appendChild(this._containerElement);
    }
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;ng-container *ngIf=&quot;toggleWidget$ | async&quot;&gt;
  
  
  &lt;app-conversations
      id=&quot;angular-app-root&quot;
      [toggleWidget$]=&quot;toggleWidget$&quot;
      [contextTitle]=&quot;contexttitle&quot;
      [contexts]=&quot;contexts&quot;
      [preloadConversations]=&quot;subscribeonload&quot;
      [widgetIdentifier]=&quot;uniqueId&quot;
    &gt;&lt;/app-conversations&gt;
  &lt;/ng-container&gt;
  &lt;ng-container
    *ngIf=&quot;(toggleWidget$ | async) === false &amp;&amp; !overridelaunchbutton&quot;
  &gt;
    &lt;button
      mat-fab
      class=&quot;message-button&quot;
      color=&quot;primary&quot;
      (click)=&quot;toggleWidget$.next(true)&quot;
    &gt;
      &lt;mat-icon svgIcon=&quot;message&quot;&gt;&lt;/mat-icon&gt;
      &lt;div class=&quot;unread-pip&quot; *ngIf=&quot;hasUnreadMessages&quot;&gt;
        {{ unreadMessageCount }}
      &lt;/div&gt;
    &lt;/button&gt;
  &lt;/ng-container&gt;
  &lt;ng-container *ngIf=&quot;overridelaunchbutton&quot;&gt;
    &lt;button
      mat-icon-button
      [ngClass]=&quot;launchbuttonclass&quot;
      [color]=&quot;launchbuttoncolor&quot;
      (click)=&quot;toggleWidget$.next(true)&quot;
    &gt;
      &lt;mat-icon svgIcon=&quot;{{ launchbuttonicon }}&quot;&gt;&lt;/mat-icon&gt;
      &lt;div class=&quot;unread-pip&quot; *ngIf=&quot;hasUnreadMessages&quot;&gt;
        {{ unreadMessageCount }}
      &lt;/div&gt;
    &lt;/button&gt;
  &lt;/ng-container&gt;
  </code></pre>