feat(shadowdom): turn on ShadowDom Emulated Mode by default.

Closes: #526

modules/angular2/src/core/application.js

@@ -14,7 +14,7 @@ import {List, ListWrapper} from 'angular2/src/facade/collection';
 import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
 import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
 import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
+import {ShadowDomStrategy, NativeShadowDomStrategy, EmulatedUnscopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
 import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
 import {EventManager, DomEventsPlugin} from 'angular2/src/core/events/event_manager';
@@ -84,7 +84,9 @@ function _injectorBindings(appComponentType): List<Binding> {
         var plugins = [new HammerGesturesPlugin(), new DomEventsPlugin()];
         return new EventManager(plugins, zone);
       }, [VmTurnZone]),
-      bind(ShadowDomStrategy).toClass(NativeShadowDomStrategy),
+      bind(ShadowDomStrategy).toFactory(
+          (styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
+          [StyleUrlResolver, appDocumentToken]),
       Compiler,
       CompilerCache,
       TemplateResolver,

modules/angular2/src/core/compiler/shadow_dom_emulation/light_dom.js

@@ -36,6 +36,7 @@ export class LightDom {
     this.lightDomView = lightDomView;
     this.shadowDomView = shadowDomView;
     this.nodes = DOM.childNodesAsList(element);
+
     this.roots = null;
   }
 

modules/angular2/src/core/compiler/shadow_dom_strategy.js

@@ -78,7 +78,7 @@ export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {
     this._styleHost = styleHost;
   }
 
-  attachTemplate(el, view:viewModule.View){
+  attachTemplate(el, view:viewModule.View) {
     DOM.clearNodes(el);
     _moveViewNodesIntoParent(el, view);
   }

modules/angular2/src/dom/browser_adapter.es6

@@ -80,7 +80,9 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     return res;
   }
   clearNodes(el) {
-    el.innerHTML = '';
+    for (var i = 0; i < el.childNodes.length; i++) {
+      this.remove(el.childNodes[i]);
+    }
   }
   appendChild(el, node) {
     el.appendChild(node);

modules/angular2/test/core/application_spec.js

@@ -18,6 +18,12 @@ class HelloRootCmp {
   }
 }
 
+@Component({selector: 'hello-app'})
+@Template({inline: 'before: <content></content> after: done'})
+class HelloRootCmpContent {
+  constructor() { }
+}
+
 @Component({selector: 'hello-app-2'})
 @Template({inline: '{{greeting}} world, again!'})
 class HelloRootCmp2 {
@@ -48,14 +54,17 @@ class HelloRootCmp4 {
 }
 
 export function main() {
-  var fakeDoc, el, el2, testBindings;
+  var fakeDoc, el, el2, testBindings, lightDom;
 
   beforeEach(() => {
     fakeDoc = DOM.createHtmlDocument();
     el = DOM.createElement('hello-app', fakeDoc);
     el2 = DOM.createElement('hello-app-2', fakeDoc);
+    lightDom = DOM.createElement('light-dom-el', fakeDoc);
     DOM.appendChild(fakeDoc.body, el);
     DOM.appendChild(fakeDoc.body, el2);
+    DOM.appendChild(el, lightDom);
+    DOM.setText(lightDom, 'loading');
     testBindings = [bind(appDocumentToken).toValue(fakeDoc)];
   });
 
@@ -93,8 +102,7 @@ export function main() {
     it('should display hello world', (done) => {
       var injectorPromise = bootstrap(HelloRootCmp, testBindings);
       injectorPromise.then((injector) => {
-        expect(injector.get(appElementToken)
-            .shadowRoot.childNodes[0].nodeValue).toEqual('hello world!');
+        expect(injector.get(appElementToken)).toHaveText('hello world!');
         done();
       });
     });
@@ -103,10 +111,8 @@ export function main() {
       var injectorPromise1 = bootstrap(HelloRootCmp, testBindings);
       var injectorPromise2 = bootstrap(HelloRootCmp2, testBindings);
       PromiseWrapper.all([injectorPromise1, injectorPromise2]).then((injectors) => {
-        expect(injectors[0].get(appElementToken)
-            .shadowRoot.childNodes[0].nodeValue).toEqual('hello world!');
-        expect(injectors[1].get(appElementToken)
-            .shadowRoot.childNodes[0].nodeValue).toEqual('hello world, again!');
+        expect(injectors[0].get(appElementToken)).toHaveText('hello world!');
+        expect(injectors[1].get(appElementToken)).toHaveText('hello world, again!');
         done();
       });
     });
@@ -131,5 +137,13 @@ export function main() {
         done();
       });
     });
+
+    it("should support shadow dom content tag", (done) => {
+      var injectorPromise = bootstrap(HelloRootCmpContent, testBindings);
+      injectorPromise.then((injector) => {
+        expect(injector.get(appElementToken)).toHaveText('before: loading after: done');
+        done();
+      });
+    });
   });
 }