- fixes host styles for type extension elements.

Author: sorvell

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;

test/html/styling/host.html

@@ -215,6 +215,12 @@ <h4>Expected: 20px padding</h4>
       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();