diff --git a/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js b/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js index 655de6b4c9..404c50427e 100644 --- a/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js +++ b/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js @@ -5,7 +5,7 @@ import {CompileControl} from './compile_control'; import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata'; import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy'; -import {DOM, Element} from 'angular2/src/facade/dom'; +import {DOM, Element, StyleElement} from 'angular2/src/facade/dom'; import {isPresent, isBlank, Type} from 'angular2/src/facade/lang'; export class ShimShadowCss extends CompileStep { @@ -27,23 +27,24 @@ export class ShimShadowCss extends CompileStep { if (DOM.tagName(current.element) == 'STYLE') { current.ignoreBindings = true; if (this._strategy.extractStyles()) { - DOM.remove(current.element); - var css = DOM.getText(current.element); + var styleEl = current.element; + DOM.remove(styleEl); + var css = DOM.getText(styleEl); var shimComponent = this._strategy.getShimComponent(this._component); css = shimComponent.shimCssText(css); - this._insertStyle(this._styleHost, css); + DOM.setText(styleEl, css); + this._insertStyle(this._styleHost, styleEl); } } } - _insertStyle(el: Element, css: string) { - var style = DOM.createStyleElement(css); + _insertStyle(host: Element, style: StyleElement) { if (isBlank(this._lastInsertedStyle)) { - var firstChild = DOM.firstChild(el); + var firstChild = DOM.firstChild(host); if (isPresent(firstChild)) { DOM.insertBefore(firstChild, style); } else { - DOM.appendChild(el, style); + DOM.appendChild(host, style); } } else { DOM.insertAfter(this._lastInsertedStyle, style); diff --git a/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js b/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js index c67bb14bd3..679ebb5259 100644 --- a/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js +++ b/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js @@ -9,6 +9,7 @@ import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata'; import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy'; import {Type} from 'angular2/src/facade/lang'; +import {DOM} from 'angular2/src/facade/dom'; export function main() { describe('ShimShadowCss', () => { @@ -53,6 +54,15 @@ export function main() { expect(host).toHaveText('/* shim */.s{}original content'); }); + it('should preserve attributes on moved style', () => { + var host = el('
'); + var pipeline = createPipeline(new FakeStrategy(true), host); + var template = el('
'); + pipeline.process(template); + var styleEl = DOM.firstChild(host); + expect(DOM.getAttribute(styleEl, 'media')).toEqual('print'); + }); + it('should move the styles to the host in the original order', () => { var host = el('
'); var pipeline = createPipeline(new FakeStrategy(true), host); @@ -60,6 +70,7 @@ export function main() { pipeline.process(template); expect(host).toHaveText('/* shim */.s1{}/* shim */.s2{}'); }); + }); }