diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js index 590b7d5..f93603b 100644 --- a/src/ShadowCSS.js +++ b/src/ShadowCSS.js @@ -322,7 +322,7 @@ var ShadowCSS = { return self.scopeHostCss(p1, name, typeExtension); }); cssText = rulesToCss(this.findAtHostRules(cssToRules(cssText), - new RegExp('^' + name + selectorReSuffix, 'm'))); + this.makeScopeMatcher(name, typeExtension))); return cssText; }, scopeHostCss: function(cssText, name, typeExtension) { @@ -444,10 +444,13 @@ var ShadowCSS = { return r.join(', '); }, selectorNeedsScoping: function(selector, name, typeExtension) { - var matchScope = typeExtension ? name : '\\[is=' + name + '\\]'; - var re = new RegExp('^(' + matchScope + ')' + selectorReSuffix, 'm'); + var re = this.makeScopeMatcher(name, typeExtension); return !selector.match(re); }, + makeScopeMatcher: function(name, typeExtension) { + var matchScope = typeExtension ? '\\[is=[\'"]?' + name + '[\'"]?\\]' : name; + return new RegExp('^(' + matchScope + ')' + selectorReSuffix, 'm'); + }, // scope via name and [is=name] applySimpleSelectorScope: function(selector, name, typeExtension) { var scoper = typeExtension ? '[is=' + name + ']' : name; diff --git a/test/html/styling/host.html b/test/html/styling/host.html index b157851..7974a75 100644 --- a/test/html/styling/host.html +++ b/test/html/styling/host.html @@ -215,6 +215,12 @@

Expected: 20px padding

chai.assert.equal(zimStyle2.paddingLeft, '20px', '@host styles are loaded via external sheet in import (paddingLeft)'); + var xButton = document.querySelector('[is=x-button]'); + var xButtonStyle = getComputedStyle(xButton); + chai.assert.equal(xButtonStyle.backgroundColor, 'rgb(0, 128, 0)', + '@host styles function for type extension (backgroundColor)'); + + done();