fix(styles): prevent wrapping Polymer scoped styles in <custom-style>

Fixes #33

src/style/shared-styles-host.spec.ts

@@ -50,7 +50,7 @@ class TestComponent { }
 })
 class NativeComponent { }
 
-describe('DomSharedCustomStylesHost', () => {
+describe('PolymerDomSharedStylesHost', () => {
   let fixture: ComponentFixture<TestComponent>;
 
   beforeEach(() => {
@@ -88,4 +88,16 @@ describe('DomSharedCustomStylesHost', () => {
       });
     }));
   }
+
+  it('should ignore <style> elements with scope attribute from Polymer', async(() => {
+    const scopeStyle = document.createElement('style');
+    scopeStyle.setAttribute('scope', 'my-element');
+    document.head.appendChild(scopeStyle);
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      expect(document.head.querySelectorAll('custom-style').length).toBeGreaterThan(0);
+      expect(scopeStyle.parentElement).toBe(document.head);
+      document.head.removeChild(scopeStyle);
+    });
+  }));
 });

src/style/shared-styles-host.ts

@@ -36,10 +36,11 @@ export class PolymerDomSharedStylesHost extends DomSharedStylesHost {
   private wrapStyleNodes() {
     this.hostNodes.forEach(hostNode => {
       Array.from(hostNode.childNodes).forEach(childNode => {
-        if ((<Element>childNode).tagName === 'STYLE') {
+        const childEle = childNode as Element;
+        if (childEle.tagName === 'STYLE' && !childEle.hasAttribute('scope')) {
           const customStyleEl = this.document.createElement('custom-style');
           hostNode.removeChild(childNode);
-          (<Element>childNode).setAttribute('is', 'custom-style');
+          childEle.setAttribute('is', 'custom-style');
           customStyleEl.appendChild(childNode);
           hostNode.appendChild(customStyleEl);
         }