angular__angular/packages/platform-browser/test/dom/dom_renderer_spec.ts

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */
import {NgIf} from '@angular/common';
import {ChangeDetectionStrategy} from '@angular/compiler';
import {Component, Renderer2, ViewEncapsulation} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {isNode} from '@angular/private/testing';
import {expect} from '@angular/private/testing/matchers';
import {By} from '../../src/dom/debug/by';
import {
  addBaseHrefToCssSourceMap,
  NAMESPACE_URIS,
  provideCssVarNamespacing,
  REMOVE_STYLES_ON_COMPONENT_DESTROY,
} from '../../src/dom/dom_renderer';

describe('DefaultDomRendererV2', () => {
  if (isNode) {
    // Jasmine will throw if there are no tests.
    it('should pass', () => {});
    return;
  }

  let renderer: Renderer2;

  beforeEach(() => {
    renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
  });

  describe('setAttribute', () => {
    describe('with namespace', () => {
      it('xmlns', () => shouldSetAttributeWithNs('xmlns'));
      it('xml', () => shouldSetAttributeWithNs('xml'));
      it('svg', () => shouldSetAttributeWithNs('svg'));
      it('xhtml', () => shouldSetAttributeWithNs('xhtml'));
      it('xlink', () => shouldSetAttributeWithNs('xlink'));

      it('unknown', () => {
        const div = document.createElement('div');
        expect(div.hasAttribute('unknown:name')).toBe(false);

        renderer.setAttribute(div, 'name', 'value', 'unknown');

        expect(div.getAttribute('unknown:name')).toBe('value');
      });

      function shouldSetAttributeWithNs(namespace: string): void {
        const namespaceUri = NAMESPACE_URIS[namespace];
        const div = document.createElement('div');
        expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(false);

        renderer.setAttribute(div, 'name', 'value', namespace);

        expect(div.getAttributeNS(namespaceUri, 'name')).toBe('value');
      }
    });
  });

  describe('removeAttribute', () => {
    describe('with namespace', () => {
      it('xmlns', () => shouldRemoveAttributeWithNs('xmlns'));
      it('xml', () => shouldRemoveAttributeWithNs('xml'));
      it('svg', () => shouldRemoveAttributeWithNs('svg'));
      it('xhtml', () => shouldRemoveAttributeWithNs('xhtml'));
      it('xlink', () => shouldRemoveAttributeWithNs('xlink'));

      it('unknown', () => {
        const div = document.createElement('div');
        div.setAttribute('unknown:name', 'value');
        expect(div.hasAttribute('unknown:name')).toBe(true);

        renderer.removeAttribute(div, 'name', 'unknown');

        expect(div.hasAttribute('unknown:name')).toBe(false);
      });

      function shouldRemoveAttributeWithNs(namespace: string): void {
        const namespaceUri = NAMESPACE_URIS[namespace];
        const div = document.createElement('div');
        div.setAttributeNS(namespaceUri, `${namespace}:name`, 'value');
        expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(true);

        renderer.removeAttribute(div, 'name', namespace);

        expect(div.hasAttributeNS(namespaceUri, 'name')).toBe(false);
      }
    });
  });

  describe('removeChild', () => {
    it('should not error when removing a child without passing a parent', () => {
      const parent = document.createElement('div');
      const child = document.createElement('div');

      parent.appendChild(child);
      renderer.removeChild(null, child);
    });
  });

  it('should style non-descendant components correctly with different types of encapsulation', async () => {
    const fixture = TestBed.createComponent(SomeApp);
    await fixture.whenStable();

    const cmp = fixture.debugElement.query(By.css('cmp-shadow')).nativeElement;
    const shadowRoot = cmp.shadowRoot;
    const shadow = shadowRoot.querySelector('.shadow');
    expect(window.getComputedStyle(shadow).color).toEqual('rgb(255, 0, 0)');

    const emulated = fixture.debugElement.query(By.css('.emulated')).nativeElement;
    expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');

    const none = fixture.debugElement.query(By.css('.none')).nativeElement;
    expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
  });

  it('should encapsulate shadow DOM components, with child components inheriting from shadow styles not global styles', async () => {
    const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
    await fixture.whenStable();
    const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
    const shadowRoot = shadowcmp.shadowRoot;

    const shadow = shadowRoot.querySelector('.shadow');
    expect(window.getComputedStyle(shadow).color).toEqual('rgb(255, 0, 0)');

    const emulated = fixture.debugElement.query(By.css('.emulated')).nativeElement;
    expect(window.getComputedStyle(emulated).color).toEqual('rgb(255, 0, 0)');

    const none = fixture.debugElement.query(By.css('.none')).nativeElement;
    expect(window.getComputedStyle(none).color).toEqual('rgb(255, 0, 0)');
  });

  it('child components of shadow components should inherit browser defaults rather than their component styles', async () => {
    const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
    await fixture.whenStable();

    const shadowcmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
    const shadowRoot = shadowcmp.shadowRoot;
    const shadow = shadowRoot.querySelector('.shadow');
    expect(window.getComputedStyle(shadow).backgroundColor).toEqual('rgba(0, 0, 0, 0)');

    const emulated = fixture.debugElement.query(By.css('.emulated')).nativeElement;
    expect(window.getComputedStyle(emulated).backgroundColor).toEqual('rgba(0, 0, 0, 0)');

    const none = fixture.debugElement.query(By.css('.none')).nativeElement;
    expect(window.getComputedStyle(none).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
  });

  it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', async () => {
    const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
    await fixture.whenStable();

    const cmp = fixture.debugElement.query(By.css('cmp-shadow-children')).nativeElement;
    const shadowRoot = cmp.shadowRoot;
    const shadow = shadowRoot.querySelector('.shadow');
    expect(window.getComputedStyle(shadow).backgroundColor).not.toEqual('rgb(0, 0, 255)');
    expect(window.getComputedStyle(shadow).backgroundColor).not.toEqual('rgb(0, 255, 0)');
  });

  it('should be able to append children to a <template> element', () => {
    const template = document.createElement('template');
    const child = document.createElement('div');

    renderer.appendChild(template, child);

    expect(child.parentNode).toBe(template.content);
  });

  it('should be able to insert children before others in a <template> element', () => {
    const template = document.createElement('template');
    const child = document.createElement('div');
    const otherChild = document.createElement('div');
    template.content.appendChild(child);

    renderer.insertBefore(template, otherChild, child);

    expect(otherChild.parentNode).toBe(template.content);
  });

  it('should be able to insert a child when `refChild` is `null`', () => {
    const parent = document.createElement('div');
    const child = document.createElement('div');

    renderer.insertBefore(parent, child, null);

    expect(child.parentNode).toBe(parent);
  });

  describe('when the reference node was detached outside of Angular', () => {
    it('should throw a descriptive error instead of a native NotFoundError', () => {
      const parent = document.createElement('div');
      const refChild = document.createElement('span');
      const newChild = document.createElement('div');
      parent.appendChild(refChild);

      // pretend something outside Angular removed it
      refChild.remove();

      expect(() => renderer.insertBefore(parent, newChild, refChild)).toThrowError(/NG05106/);
      expect(newChild.parentNode).toBeNull();
    });

    it('should throw a descriptive error when the reference node was moved to another parent', () => {
      const parent = document.createElement('div');
      const otherParent = document.createElement('div');
      const refChild = document.createElement('span');
      const newChild = document.createElement('div');
      parent.appendChild(refChild);

      otherParent.appendChild(refChild);

      expect(() => renderer.insertBefore(parent, newChild, refChild)).toThrowError(/NG05106/);
    });
  });

  describe('should not cleanup styles of destroyed components when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is `false`', () => {
    beforeEach(() => {
      TestBed.resetTestingModule();

      TestBed.configureTestingModule({
        imports: [SomeAppForCleanUp],
        providers: [
          {
            provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
            useValue: false,
          },
        ],
      });
    });

    it('works for components without encapsulation emulated', async () => {
      const fixture = TestBed.createComponent(SomeAppForCleanUp);
      const compInstance = fixture.componentInstance;
      compInstance.showEmulatedComponents = true;

      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // verify style is in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(1);

      // Remove a single instance of the component.
      compInstance.componentOneInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // Verify style is still in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(1);

      // Hide all instances of the component
      compInstance.componentTwoInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();

      // Verify style is still in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(1);
    });

    it('works for components without encapsulation none', async () => {
      const fixture = TestBed.createComponent(SomeAppForCleanUp);
      const compInstance = fixture.componentInstance;
      compInstance.showEmulatedComponents = false;

      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // verify style is in DOM
      expect(await styleCount(fixture, '.none')).toBe(1);

      // Remove a single instance of the component.
      compInstance.componentOneInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // Verify style is still in DOM
      expect(await styleCount(fixture, '.none')).toBe(1);

      // Hide all instances of the component
      compInstance.componentTwoInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();

      // Verify style is still in DOM
      expect(await styleCount(fixture, '.none')).toBe(1);
    });
  });

  describe('should cleanup styles of destroyed components by default', () => {
    it('works for components without encapsulation emulated', async () => {
      const fixture = TestBed.createComponent(SomeAppForCleanUp);
      const compInstance = fixture.componentInstance;
      compInstance.showEmulatedComponents = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // verify style is in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(1);

      // Remove a single instance of the component.
      compInstance.componentOneInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // Verify style is still in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(1);

      // Hide all instances of the component
      compInstance.componentTwoInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();

      // Verify style is not in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(0);
    });

    it('works for components without encapsulation none', async () => {
      const fixture = TestBed.createComponent(SomeAppForCleanUp);
      const compInstance = fixture.componentInstance;
      compInstance.showEmulatedComponents = false;

      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // verify style is in DOM
      expect(await styleCount(fixture, '.none')).toBe(1);

      // Remove a single instance of the component.
      compInstance.componentOneInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();
      // Verify style is still in DOM
      expect(await styleCount(fixture, '.none')).toBe(1);

      // Hide all instances of the component
      compInstance.componentTwoInstanceHidden = true;
      fixture.changeDetectorRef.markForCheck();
      await fixture.whenStable();

      // Verify style is not in DOM
      expect(await styleCount(fixture, '.emulated')).toBe(0);
    });
  });

  describe('should support namespaces', () => {
    it('should create SVG elements', () => {
      expect(
        document.createElementNS(NAMESPACE_URIS['svg'], 'math') instanceof SVGElement,
      ).toBeTrue();
    });

    it('should create MathML elements', () => {
      expect(
        document.createElementNS(NAMESPACE_URIS['math'], 'math') instanceof MathMLElement,
      ).toBeTrue();
    });
  });

  it('should update an external sourceMappingURL by prepending the baseHref as a prefix', async () => {
    document.head.innerHTML = `<base href="/base/" />`;
    TestBed.resetTestingModule();

    const fixture = TestBed.createComponent(CmpEncapsulationNoneWithSourceMap);
    await fixture.whenStable();

    expect(document.head.querySelector('style')?.textContent).toContain(
      '/*# sourceMappingURL=/base/cmp-none.css.map */',
    );

    document.head.innerHTML = '';
  });

  describe('CSS namespacing', () => {
    beforeEach(() => {
      TestBed.resetTestingModule();
    });

    describe('with provided namespace', () => {
      it('should replace `%NS%` in styles for `Emulated` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-emulated',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.Emulated,
        })
        class CmpNamespaceEmulated {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceEmulated],
          providers: [provideCssVarNamespacing('my-namespace')],
        });
        const fixture = TestBed.createComponent(CmpNamespaceEmulated);
        await fixture.whenStable();

        expect(await styleCount(fixture, 'var(--my-namespace_foo)')).toBe(1);
      });

      it('should replace `%NS%` in styles for `None` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-none',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.None,
        })
        class CmpNamespaceNone {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceNone],
          providers: [provideCssVarNamespacing('my-namespace')],
        });
        const fixture = TestBed.createComponent(CmpNamespaceNone);
        await fixture.whenStable();

        expect(await styleCount(fixture, 'var(--my-namespace_foo)')).toBe(1);
      });

      it('should replace `%NS%` in styles for `ShadowDom` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-shadow',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.ShadowDom,
        })
        class CmpNamespaceShadow {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceShadow],
          providers: [provideCssVarNamespacing('my-namespace')],
        });
        const fixture = TestBed.createComponent(CmpNamespaceShadow);
        await fixture.whenStable();

        const styles = fixture.nativeElement.shadowRoot.querySelectorAll(
          'style',
        ) as NodeListOf<HTMLStyleElement>;
        const css = Array.from(styles)
          .map((s) => s.textContent)
          .join('\n\n');
        expect(css).toContain('var(--my-namespace_foo)');
      });
    });

    describe('with default (empty) namespace', () => {
      it('should replace `%NS%` in styles for `Emulated` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-emulated',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.Emulated,
        })
        class CmpNamespaceEmulated {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceEmulated],
          providers: [], // No `provideCssVarNamespacing`.
        });
        const fixture = TestBed.createComponent(CmpNamespaceEmulated);
        await fixture.whenStable();

        expect(await styleCount(fixture, 'var(--foo)')).toBe(1);
      });

      it('should replace `%NS%` in styles for `None` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-none',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.None,
        })
        class CmpNamespaceNone {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceNone],
          providers: [], // No `provideCssVarNamespacing`.
        });
        const fixture = TestBed.createComponent(CmpNamespaceNone);
        await fixture.whenStable();

        expect(await styleCount(fixture, 'var(--foo)')).toBe(1);
      });

      it('should replace `%NS%` in styles for `ShadowDom` encapsulation', async () => {
        @Component({
          selector: 'cmp-namespace-shadow',
          template: '',
          styles: `
            :host {
              color: var(--%NS%foo);
            }
          `,
          encapsulation: ViewEncapsulation.ShadowDom,
        })
        class CmpNamespaceShadow {}

        TestBed.configureTestingModule({
          imports: [CmpNamespaceShadow],
          providers: [], // No `provideCssVarNamespacing`.
        });
        const fixture = TestBed.createComponent(CmpNamespaceShadow);
        await fixture.whenStable();

        const styles = fixture.nativeElement.shadowRoot.querySelectorAll(
          'style',
        ) as NodeListOf<HTMLStyleElement>;
        const css = Array.from(styles)
          .map((s) => s.textContent)
          .join('\n\n');
        expect(css).toContain('var(--foo)');
      });
    });

    describe('style property bindings namespacing', () => {
      it('should namespace style property bindings starting with `--`', async () => {
        @Component({
          selector: 'cmp-style-prop-namespace',
          template: `<div [style.--foo]="'blue'"></div>`,
          standalone: true,
        })
        class CmpStylePropNamespace {}

        TestBed.configureTestingModule({
          imports: [CmpStylePropNamespace],
          providers: [provideCssVarNamespacing('my-namespace')],
        });
        const fixture = TestBed.createComponent(CmpStylePropNamespace);
        await fixture.whenStable();

        const div = fixture.nativeElement.querySelector('div');
        expect(div.style.getPropertyValue('--my-namespace_foo')).toBe('blue');
        expect(div.style.getPropertyValue('--foo')).toBe('');
      });

      // TODO: Enforce this in v23.
      xit('should throw an error if style property binding starts with `--global-` with a single hyphen', () => {
        @Component({
          selector: 'cmp-style-prop-error',
          template: `<div [style.--global-foo]="'blue'"></div>`,
          standalone: true,
        })
        class CmpStylePropError {}

        expect(() => {
          TestBed.configureTestingModule({
            imports: [CmpStylePropError],
            providers: [provideCssVarNamespacing('my-namespace')],
          });
        }).toThrowError(/CSS variable "--global-foo" has a single hyphen after "--global"/);
      });

      it('should namespace styles set via Renderer2.setStyle/removeStyle', () => {
        @Component({
          selector: 'cmp-renderer-set-style',
          template: '',
          standalone: true,
        })
        class CmpRendererSetStyle {
          constructor(public renderer: Renderer2) {}
        }

        TestBed.configureTestingModule({
          imports: [CmpRendererSetStyle],
          providers: [provideCssVarNamespacing('my-namespace')],
        });
        const fixture = TestBed.createComponent(CmpRendererSetStyle);
        const comp = fixture.componentInstance;
        const div = document.createElement('div');

        comp.renderer.setStyle(div, '--%NS%foo', 'blue');
        expect(div.style.getPropertyValue('--my-namespace_foo')).toBe('blue');

        comp.renderer.setStyle(div, '--bar', 'red');
        expect(div.style.getPropertyValue('--bar')).toBe('red');
        expect(div.style.getPropertyValue('--my-namespace_bar')).toBe('');

        comp.renderer.removeStyle(div, '--%NS%foo');
        expect(div.style.getPropertyValue('--my-namespace_foo')).toBe('');
      });
    });
  });
});

describe('addBaseHrefToCssSourceMap', () => {
  it('should return the original styles if baseHref is empty', () => {
    const styles = ['body { color: red; }'];
    const result = addBaseHrefToCssSourceMap('', styles);
    expect(result).toEqual(styles);
  });

  it('should skip styles that do not contain a sourceMappingURL', () => {
    const styles = ['body { color: red; }', 'h1 { font-size: 2rem; }'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(styles);
  });

  it('should not modify inline (encoded) sourceMappingURL maps', () => {
    const styles = ['/*# sourceMappingURL=data:application/json;base64,xyz */'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(styles);
  });

  it('should prepend baseHref to external sourceMappingURL', () => {
    const styles = ['/*# sourceMappingURL=style.css */'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(['/*# sourceMappingURL=/base/style.css */']);
  });

  it('should handle baseHref with a trailing slash correctly', () => {
    const styles = ['/*# sourceMappingURL=style.css */'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(['/*# sourceMappingURL=/base/style.css */']);
  });

  it('should handle baseHref without a trailing slash correctly', () => {
    const styles = ['/*# sourceMappingURL=style.css */'];
    const result = addBaseHrefToCssSourceMap('/base', styles);
    expect(result).toEqual(['/*# sourceMappingURL=/style.css */']);
  });

  it('should not duplicate slashes in the final URL', () => {
    const styles = ['/*# sourceMappingURL=./style.css */'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(['/*# sourceMappingURL=/base/style.css */']);
  });

  it('should not add base href to sourceMappingURL that is absolute', () => {
    const styles = ['/*# sourceMappingURL=http://example.com/style.css */'];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual(['/*# sourceMappingURL=http://example.com/style.css */']);
  });

  it('should process multiple styles and handle each case correctly', () => {
    const styles = [
      '/*# sourceMappingURL=style1.css */',
      '/*# sourceMappingURL=data:application/json;base64,xyz */',
      'h1 { font-size: 2rem; }',
      '/*# sourceMappingURL=style2.css */',
    ];
    const result = addBaseHrefToCssSourceMap('/base/', styles);
    expect(result).toEqual([
      '/*# sourceMappingURL=/base/style1.css */',
      '/*# sourceMappingURL=data:application/json;base64,xyz */',
      'h1 { font-size: 2rem; }',
      '/*# sourceMappingURL=/base/style2.css */',
    ]);
  });
});

async function styleCount(
  fixture: ComponentFixture<unknown>,
  cssContentMatcher: string,
): Promise<number> {
  // flush
  await new Promise<void>((resolve) => {
    setTimeout(() => resolve(), 0);
  });

  const html = fixture.debugElement.parent?.parent;
  const debugElements = html?.queryAll(By.css('style'));

  if (!debugElements) {
    return 0;
  }

  return debugElements.filter(({nativeElement}) =>
    nativeElement.textContent.includes(cssContentMatcher),
  ).length;
}

@Component({
  selector: 'cmp-emulated',
  template: ` <div class="emulated"></div>`,
  styles: [
    `
      .emulated {
        background-color: blue;
        color: blue;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.Emulated,
})
class CmpEncapsulationEmulated {}

@Component({
  selector: 'cmp-none',
  template: ` <div class="none"></div>`,
  styles: [
    `
      .none {
        background-color: lime;
        color: lime;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
class CmpEncapsulationNone {}

@Component({
  selector: 'cmp-none',
  template: ` <div class="none"></div>`,
  styles: [
    `
      .none {
        background-color: lime;
        color: lime;
      }

      /*# sourceMappingURL=cmp-none.css.map */
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
class CmpEncapsulationNoneWithSourceMap {}

@Component({
  selector: 'cmp-shadow',
  template: ` <div class="shadow"></div>`,
  styles: [
    `
      .shadow {
        color: red;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.ShadowDom,
})
class CmpEncapsulationShadow {}

@Component({
  selector: 'cmp-shadow-children',
  template: ` <div class="shadow">
    <cmp-emulated></cmp-emulated>
    <cmp-none></cmp-none>
  </div>`,
  styles: [
    `
      .shadow {
        color: red;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom,
  imports: [CmpEncapsulationEmulated, CmpEncapsulationNone],
})
class CmpEncapsulationIsolatedShadowWithChildren {}

@Component({
  selector: 'some-app',
  template: `
    <cmp-shadow></cmp-shadow>
    <cmp-emulated></cmp-emulated>
    <cmp-none></cmp-none>
  `,
  imports: [CmpEncapsulationShadow, CmpEncapsulationEmulated, CmpEncapsulationNone],
  changeDetection: ChangeDetectionStrategy.Eager,
})
export class SomeApp {}

@Component({
  selector: 'shadow-parent-app-with-children',
  template: ` <cmp-shadow-children></cmp-shadow-children> `,
  imports: [CmpEncapsulationIsolatedShadowWithChildren],
  changeDetection: ChangeDetectionStrategy.Eager,
})
export class IsolatedShadowComponentParentApp {}

@Component({
  selector: 'test-cmp',
  template: '',
  changeDetection: ChangeDetectionStrategy.Eager,
})
class TestCmp {
  constructor(public renderer: Renderer2) {}
}

@Component({
  selector: 'some-app',
  template: `
    <cmp-emulated *ngIf="!componentOneInstanceHidden && showEmulatedComponents"></cmp-emulated>
    <cmp-emulated *ngIf="!componentTwoInstanceHidden && showEmulatedComponents"></cmp-emulated>

    <cmp-none *ngIf="!componentOneInstanceHidden && !showEmulatedComponents"></cmp-none>
    <cmp-none *ngIf="!componentTwoInstanceHidden && !showEmulatedComponents"></cmp-none>
  `,
  imports: [NgIf, CmpEncapsulationEmulated, CmpEncapsulationNone],
  changeDetection: ChangeDetectionStrategy.Eager,
})
export class SomeAppForCleanUp {
  componentOneInstanceHidden = false;
  componentTwoInstanceHidden = false;
  showEmulatedComponents = true;
}