diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html index aa5a557222..fc493f9521 100644 --- a/src/lib/style-transformer.html +++ b/src/lib/style-transformer.html @@ -235,26 +235,21 @@ // :host(...) -> scopeName... _transformHostSelector: function(selector, hostScope) { - var m = HOST_PAREN.exec(selector); - HOST_PAREN.lastIndex = 0; - var paren = m && m[2].trim(); - if (paren) { - var selectorKind = /[[.:#*]/; - if (!paren[0].match(selectorKind)) { - var typeSelector = paren.split(selectorKind)[0]; - if (typeSelector === hostScope) { - hostScope = ''; - } else { - return SELECTOR_NO_MATCH; - } + var m = selector.match(HOST_PAREN); + var paren = m && m[2].trim() || ''; + if (paren && !paren[0].match(SIMPLE_SELECTOR_PREFIX)) { + // paren starts with a type selector + var typeSelector = paren.split(SIMPLE_SELECTOR_PREFIX)[0]; + // if the type selector is our hostScope then avoid pre-pending it + if (typeSelector === hostScope) { + return paren; + // otherwise, this selector should not match in this scope so + // output a bogus selector. + } else { + return SELECTOR_NO_MATCH; } - return selector.replace(HOST_PAREN, function(m, host, paren) { - return hostScope + paren; - }); - } else { - // now normal :host - return selector.replace(HOST, hostScope); } + return hostScope + paren; }, documentRule: function(rule) { @@ -286,12 +281,13 @@ ':not(.' + SCOPE_NAME + ')'; var COMPLEX_SELECTOR_SEP = ','; var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=\[])+)/g; + var SIMPLE_SELECTOR_PREFIX = /[[.:#*]/; var HOST = ':host'; var ROOT = ':root'; // NOTE: this supports 1 nested () pair for things like // :host(:not([selected]), more general support requires // parsing which seems like overkill - var HOST_PAREN = /(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g; + var HOST_PAREN = /(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/; var HOST_CONTEXT = ':host-context'; var HOST_CONTEXT_PAREN = /(.*)(?::host-context)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))(.*)/; var CONTENT = '::content';