fix(platform-browser): should only add styles with native encapsulation in shadow DOM (#14313)

Closes #7887

PR Close #14313

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];

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 {
+}