diff --git a/modules/angular2/src/compiler/shadow_css.ts b/modules/angular2/src/compiler/shadow_css.ts index 8c8c48ed82..21775e2362 100644 --- a/modules/angular2/src/compiler/shadow_css.ts +++ b/modules/angular2/src/compiler/shadow_css.ts @@ -343,14 +343,16 @@ export class ShadowCss { strict: boolean): string { var r = [], parts = selector.split(','); for (var i = 0; i < parts.length; i++) { - var p = parts[i]; - p = p.trim(); - if (this._selectorNeedsScoping(p, scopeSelector)) { - p = strict && !StringWrapper.contains(p, _polyfillHostNoCombinator) ? - this._applyStrictSelectorScope(p, scopeSelector) : - this._applySelectorScope(p, scopeSelector, hostSelector); + var p = parts[i].trim(); + var deepParts = StringWrapper.split(p, _shadowDeepSelectors); + var shallowPart = deepParts[0]; + if (this._selectorNeedsScoping(shallowPart, scopeSelector)) { + deepParts[0] = strict && !StringWrapper.contains(shallowPart, _polyfillHostNoCombinator) ? + this._applyStrictSelectorScope(shallowPart, scopeSelector) : + this._applySelectorScope(shallowPart, scopeSelector, hostSelector); } - r.push(p); + // replace /deep/ with a space for child selectors + r.push(deepParts.join(' ')); } return r.join(', '); } @@ -434,17 +436,16 @@ var _cssColonHostRe = RegExpWrapper.create('(' + _polyfillHost + _parenSuffix, ' var _cssColonHostContextRe = RegExpWrapper.create('(' + _polyfillHostContext + _parenSuffix, 'im'); var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator'; var _shadowDOMSelectorsRe = [ - />>>/g, /::shadow/g, /::content/g, // Deprecated selectors // TODO(vicb): see https://github.com/angular/clang-format/issues/16 // clang-format off - /\/deep\//g, // former >>> /\/shadow-deep\//g, // former /deep/ /\/shadow\//g, // former ::shadow // clanf-format on ]; +var _shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)/g; var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$'; var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im'); var _colonHostRe = /:host/gim; diff --git a/modules/angular2/test/compiler/shadow_css_spec.ts b/modules/angular2/test/compiler/shadow_css_spec.ts index 14d1fd1080..19790e4d75 100644 --- a/modules/angular2/test/compiler/shadow_css_spec.ts +++ b/modules/angular2/test/compiler/shadow_css_spec.ts @@ -144,12 +144,12 @@ export function main() { it('should handle /deep/', () => { var css = s('x /deep/ y {}', 'a'); - expect(css).toEqual('x[a] y[a] {}'); + expect(css).toEqual('x[a] y {}'); }); it('should handle >>>', () => { var css = s('x >>> y {}', 'a'); - expect(css).toEqual('x[a] y[a] {}'); + expect(css).toEqual('x[a] y {}'); }); it('should pass through @import directives', () => {