From 344776f8644c7852ba26102ed47d0bbdb2dcb562 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 11 Nov 2015 10:21:29 -0800
Subject: [PATCH] fix(renderer): apply host element encapsulation also if the
 parent component is not encapsulated.

Closes #5240
---
 .../angular2/src/core/render/view_factory.ts  | 31 ++++++++++++-------
 .../test/core/render/view_factory_spec.ts     |  4 +--
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/modules/angular2/src/core/render/view_factory.ts b/modules/angular2/src/core/render/view_factory.ts
index 42b032a730..d401c265fd 100644
--- a/modules/angular2/src/core/render/view_factory.ts
+++ b/modules/angular2/src/core/render/view_factory.ts
@@ -225,19 +225,28 @@ class RenderViewBuilder<N> implements RenderCommandVisitor {
                         componentTemplate: RenderComponentTemplate): N {
     var el: N = context.consumeInplaceElement();
     var attrNameAndValues = cmd.attrNameAndValues;
-    if (this.template.encapsulation === ViewEncapsulation.Emulated) {
+    var templateEmulatedEncapsulation = this.template.encapsulation === ViewEncapsulation.Emulated;
+    var componentEmulatedEncapsulation =
+        isPresent(componentTemplate) &&
+        componentTemplate.encapsulation === ViewEncapsulation.Emulated;
+    var newAttrLength = attrNameAndValues.length + (templateEmulatedEncapsulation ? 2 : 0) +
+                        (componentEmulatedEncapsulation ? 2 : 0);
+    if (newAttrLength > attrNameAndValues.length) {
       // Note: Need to clone attrNameAndValues to make it writable!
-      if (isPresent(componentTemplate)) {
-        attrNameAndValues = attrNameAndValues.concat([
-          _shimContentAttribute(this.template.shortId),
-          '',
-          _shimHostAttribute(componentTemplate.shortId),
-          ''
-        ]);
-      } else {
-        attrNameAndValues =
-            attrNameAndValues.concat([_shimContentAttribute(this.template.shortId), '']);
+      var newAttrNameAndValues = ListWrapper.createFixedSize(newAttrLength);
+      var attrIndex;
+      for (attrIndex = 0; attrIndex < attrNameAndValues.length; attrIndex++) {
+        newAttrNameAndValues[attrIndex] = attrNameAndValues[attrIndex];
       }
+      if (templateEmulatedEncapsulation) {
+        newAttrNameAndValues[attrIndex++] = _shimContentAttribute(this.template.shortId);
+        newAttrNameAndValues[attrIndex++] = '';
+      }
+      if (componentEmulatedEncapsulation) {
+        newAttrNameAndValues[attrIndex++] = _shimHostAttribute(componentTemplate.shortId);
+        newAttrNameAndValues[attrIndex++] = '';
+      }
+      attrNameAndValues = newAttrNameAndValues;
     }
     if (isPresent(el)) {
       context.factory.mergeElement(el, attrNameAndValues);
diff --git a/modules/angular2/test/core/render/view_factory_spec.ts b/modules/angular2/test/core/render/view_factory_spec.ts
index f9f4870bdc..0166dfec9c 100644
--- a/modules/angular2/test/core/render/view_factory_spec.ts
+++ b/modules/angular2/test/core/render/view_factory_spec.ts
@@ -611,11 +611,11 @@ export function main() {
                           'innerComp', 'innerid', ViewEncapsulation.Emulated,
                           [beginElement('div', [], [], false, null), endElement()], []));
              var view = createRenderView(
-                 encapsulatedTpl, [beginComponent('my-comp', [], [], null, '0'), endComponent()],
+                 defaultCmpTpl, [beginComponent('my-comp', [], [], null, '0'), endComponent()],
                  null, nodeFactory);
              expect(stringifyFragment(view.fragments[0].nodes))
                  .toEqual(
-                     '<my-comp _ngcontent-shortid="" _nghost-innerid=""><div _ngcontent-innerid=""></div></my-comp>');
+                     '<my-comp _nghost-innerid=""><div _ngcontent-innerid=""></div></my-comp>');
            });
       });
     });