From 53cf2ec5731af3e6fe700d8db48b15b1e5aa17e3 Mon Sep 17 00:00:00 2001
From: Dzmitry Shylovich <DmitryShilovich@gmail.com>
Date: Mon, 6 Feb 2017 00:49:01 +0300
Subject: [PATCH] fix(platform-browser): should only add styles with native
 encapsulation in shadow DOM (#14313)

Closes #7887

PR Close #14313
---
 .../platform-browser/src/dom/dom_renderer.ts  |  1 -
 .../test/dom/dom_renderer_spec.ts             | 85 +++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 modules/@angular/platform-browser/test/dom/dom_renderer_spec.ts

diff --git a/modules/@angular/platform-browser/src/dom/dom_renderer.ts b/modules/@angular/platform-browser/src/dom/dom_renderer.ts
index 26f5b90437..b297e38fc3 100644
--- a/modules/@angular/platform-browser/src/dom/dom_renderer.ts
+++ b/modules/@angular/platform-browser/src/dom/dom_renderer.ts
@@ -127,7 +127,6 @@ export class DomRenderer implements Renderer {
     let nodesParent: Element|DocumentFragment;
     if (this.componentProto.encapsulation === ViewEncapsulation.Native) {
       nodesParent = (hostElement as any).createShadowRoot();
-      this._rootRenderer.sharedStylesHost.addHost(nodesParent);
       for (let i = 0; i < this._styles.length; i++) {
         const styleEl = document.createElement('style');
         styleEl.textContent = this._styles[i];
diff --git a/modules/@angular/platform-browser/test/dom/dom_renderer_spec.ts b/modules/@angular/platform-browser/test/dom/dom_renderer_spec.ts
new file mode 100644
index 0000000000..e64993bac7
--- /dev/null
+++ b/modules/@angular/platform-browser/test/dom/dom_renderer_spec.ts
@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright Google Inc. 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.io/license
+ */
+import {CommonModule} from '@angular/common';
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {describe, it} from '@angular/core/testing/testing_internal';
+import {BrowserModule} from '@angular/platform-browser';
+import {By} from '@angular/platform-browser/src/dom/debug/by';
+import {browserDetection} from '@angular/platform-browser/testing/browser_util';
+import {expect} from '@angular/platform-browser/testing/matchers';
+
+export function main() {
+  describe('DomRenderer', () => {
+
+    beforeEach(() => TestBed.configureTestingModule({imports: [BrowserModule, TestModule]}));
+
+    // other browsers don't support shadow dom
+    if (browserDetection.isChromeDesktop) {
+      it('should add only styles with native encapsulation to the shadow DOM', () => {
+        const fixture = TestBed.createComponent(SomeApp);
+        fixture.detectChanges();
+
+        const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
+        const styles = cmp.shadowRoot.querySelectorAll('style');
+        expect(styles.length).toBe(1);
+        expect(styles[0]).toHaveText('.cmp-native { color: red; }');
+      });
+    }
+  });
+}
+
+@Component({
+  selector: 'cmp-native',
+  template: ``,
+  styles: [`.cmp-native { color: red; }`],
+  encapsulation: ViewEncapsulation.Native
+})
+class CmpEncapsulationNative {
+}
+
+@Component({
+  selector: 'cmp-emulated',
+  template: ``,
+  styles: [`.cmp-emulated { color: blue; }`],
+  encapsulation: ViewEncapsulation.Emulated
+})
+class CmpEncapsulationEmulated {
+}
+
+@Component({
+  selector: 'cmp-none',
+  template: ``,
+  styles: [`.cmp-none { color: yellow; }`],
+  encapsulation: ViewEncapsulation.None
+})
+class CmpEncapsulationNone {
+}
+
+@Component({
+  selector: 'some-app',
+  template: `
+	  <cmp-native></cmp-native>
+	  <cmp-emulated></cmp-emulated>
+	  <cmp-none></cmp-none>
+  `,
+})
+export class SomeApp {
+}
+
+@NgModule({
+  declarations: [
+    SomeApp,
+    CmpEncapsulationNative,
+    CmpEncapsulationEmulated,
+    CmpEncapsulationNone,
+  ],
+  imports: [CommonModule]
+})
+class TestModule {
+}