fix(core): keep styles for ViewEncapsulation.Native isolated per component

BREAKING CHANGE:
- `Renderer.registerComponent` now takes an additional argument.

Fixes #4513
Closes #4524

modules/angular2/src/core/linker/proto_view_factory.ts

@@ -71,7 +71,7 @@ export class ProtoViewFactory {
       var compiledTemplateData = cmd.template.getData(this._appId);
 
       this._renderer.registerComponentTemplate(cmd.templateId, compiledTemplateData.commands,
-                                               compiledTemplateData.styles);
+                                               compiledTemplateData.styles, cmd.nativeShadow);
       var boundPipes = this._flattenPipes(view).map(pipe => this._bindPipe(pipe));
 
       nestedProtoView = new AppProtoView(compiledTemplateData.commands, ViewType.COMPONENT, true,

modules/angular2/src/core/render/api.ts

@@ -230,7 +230,8 @@ export class Renderer {
    * Once a template is registered it can be referenced via {@link RenderBeginComponentCmd} when
    * {@link #createProtoView creating Render ProtoView}.
    */
-  registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[]) {}
+  registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[],
+                            nativeShadow: boolean) {}
 
   /**
    * Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.

modules/angular2/src/core/render/dom/dom_renderer.ts

@@ -35,6 +35,7 @@ import {camelCaseToDashCase} from './util';
 @Injectable()
 export class DomRenderer implements Renderer, NodeFactory<Node> {
   private _componentCmds: Map<number, RenderTemplateCmd[]> = new Map<number, RenderTemplateCmd[]>();
+  private _nativeShadowStyles: Map<number, string[]> = new Map<number, string[]>();
   private _document;
 
   /**
@@ -46,9 +47,14 @@ export class DomRenderer implements Renderer, NodeFactory<Node> {
     this._document = document;
   }
 
-  registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[]) {
+  registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[],
+                            nativeShadow: boolean) {
     this._componentCmds.set(templateId, commands);
-    this._domSharedStylesHost.addStyles(styles);
+    if (nativeShadow) {
+      this._nativeShadowStyles.set(templateId, styles);
+    } else {
+      this._domSharedStylesHost.addStyles(styles);
+    }
   }
 
   resolveComponentTemplate(templateId: number): RenderTemplateCmd[] {
@@ -193,7 +199,14 @@ export class DomRenderer implements Renderer, NodeFactory<Node> {
       DOM.setAttribute(node, attrNameAndValues[attrIdx], attrNameAndValues[attrIdx + 1]);
     }
   }
-  createShadowRoot(host: Node): Node { return DOM.createShadowRoot(host); }
+  createShadowRoot(host: Node, templateId: number): Node {
+    var sr = DOM.createShadowRoot(host);
+    var styles = this._nativeShadowStyles.get(templateId);
+    for (var i = 0; i < styles.length; i++) {
+      DOM.appendChild(sr, DOM.createStyleElement(styles[i]));
+    }
+    return sr;
+  }
   createText(value: string): Node { return DOM.createTextNode(isPresent(value) ? value : ''); }
   appendChild(parent: Node, child: Node) { DOM.appendChild(parent, child); }
   on(element: Node, eventName: string, callback: Function) {

modules/angular2/src/core/render/view_factory.ts

@@ -70,7 +70,7 @@ export interface NodeFactory<N> {
   createTemplateAnchor(attrNameAndValues: string[]): N;
   createElement(name: string, attrNameAndValues: string[]): N;
   mergeElement(existing: N, attrNameAndValues: string[]);
-  createShadowRoot(host: N): N;
+  createShadowRoot(host: N, templateId: number): N;
   createText(value: string): N;
   appendChild(parent: N, child: N);
   on(element: N, eventName: string, callback: Function);
@@ -125,7 +125,7 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {
     var el = this._beginElement(cmd);
     var root = el;
     if (cmd.nativeShadow) {
-      root = this.factory.createShadowRoot(el);
+      root = this.factory.createShadowRoot(el, cmd.templateId);
       this.nativeShadowRoots.push(root);
     }
     var component = new Component(el, root, cmd, this.factory, this.allBuilders);