Class ShadowDomRenderer

packages/platform-browser/src/dom/dom_renderer.ts:565–652

}

class ShadowDomRenderer extends DefaultDomRenderer2 {
  private shadowRoot: any;

  constructor(
    eventManager: EventManager,
    private hostEl: any,
    component: RendererType2,
    doc: Document,
    ngZone: NgZone,
    nonce: string | null,
    tracingService: TracingService<TracingSnapshot> | null,
    cssVarNamespace: string,
    private sharedStylesHost?: SharedStylesHost,
  ) {
    super(eventManager, doc, ngZone, tracingService, cssVarNamespace);
    this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});

    // SharedStylesHost is used to add styles to the shadow root by ShadowDom.
    // This is optional as it is not used by ExperimentalIsolatedShadowDom.
    if (this.sharedStylesHost) {
      this.sharedStylesHost.addHost(this.shadowRoot);
    }
    let styles = component.styles;
    if (ngDevMode) {
      // We only do this in development, as for production users should not add CSS sourcemaps to components.
      const baseHref = getDOM().getBaseHref(doc) ?? '';
      styles = addBaseHrefToCssSourceMap(baseHref, styles);
    }

    styles = shimStylesContent(component.id, styles).map((s) =>
      s.replace(/%NS%/g, cssVarNamespace),
    );

    for (const style of styles) {
      const styleEl = document.createElement('style');

      if (nonce) {
        styleEl.setAttribute('nonce', nonce);
      }

      styleEl.textContent = style;
      this.shadowRoot.appendChild(styleEl);
    }

    // Apply any external component styles to the shadow root for the component's element.
    // The ShadowDOM renderer uses an alternative execution path for component styles that
    // does not use the SharedStylesHost that other encapsulation modes leverage. Much like
    // the manual addition of embedded styles directly above, any external stylesheets
    // must be manually added here to ensure ShadowDOM components are correctly styled.
    // TODO: Consider reworking the DOM Renderers to consolidate style handling.
    const styleUrls = component.getExternalStyles?.();
    if (styleUrls) {
      for (const styleUrl of styleUrls) {
        const linkEl = createLinkElement(styleUrl, doc);
        if (nonce) {
          linkEl.setAttribute('nonce', nonce);
        }
        this.shadowRoot.appendChild(linkEl);