optimization for installControllerStyles; added installScopeStyle

src/declaration/styles.js

@@ -44,7 +44,7 @@
     },
     copySheetAttributes: function(style, link) {
       for (var i=0, a$=link.attributes, l=a$.length, a; (a=a$[i]) && i<l; i++) {
-        if (a.name !== 'rel' && a.name !== 'src') {
+        if (a.name !== 'rel' && a.name !== 'href') {
           style.setAttribute(a.name, a.value);
         }
       }
@@ -66,14 +66,6 @@
      * element's template.
      * @param elementElement The <element> element to style.
      */
-    // TODO(sorvell): wip... caching and styles handling can probably be removed
-    // We need a scheme to ensure stylesheets are eagerly loaded without 
-    // the creation of an element instance. Here are 2 options for handling this:
-    // 1. create a dummy element with ShadowDOM in dom that includes ALL styles
-    // processed here.
-    // 2. place stylesheets outside the element template. This will allow 
-    // imports to naturally load the sheets. Then at load time, we can remove
-    // the stylesheet from dom.
     installSheets: function() {
       this.cacheSheets();
       this.cacheStyles();

src/instance/styles.js

@@ -19,41 +19,53 @@
     /**
      * Installs external stylesheets and <style> elements with the attribute 
      * polymer-scope='controller' into the scope of element. This is intended
-     * to be a called during custom element construction. Note, this incurs a 
-     * per instance cost and should be used sparingly.
-     *
-     * The need for this type of styling should go away when the shadowDOM spec
-     * addresses these issues:
-     * 
-     * https://www.w3.org/Bugs/Public/show_bug.cgi?id=21391
-     * https://www.w3.org/Bugs/Public/show_bug.cgi?id=21390
-     * https://www.w3.org/Bugs/Public/show_bug.cgi?id=21389
-     * 
-     * @param element The custom element instance into whose controller (parent)
-     * scope styles will be installed.
-     * @param elementElement The <element> containing controller styles.
+     * to be a called during custom element construction.
     */
-    // TODO(sorvell): remove when spec issues are addressed
     installControllerStyles: function() {
       // apply controller styles, but only if they are not yet applied
-      var scope = this.findStyleController();
-      if (scope && !this.scopeHasElementStyle(scope, STYLE_CONTROLLER_SCOPE)) {
+      var scope = this.findStyleScope();
+      if (scope && !this.scopeHasNamedStyle(scope, this.localName)) {
         // allow inherited controller styles
         var proto = getPrototypeOf(this), cssText = '';
         while (proto && proto.element) {
           cssText += proto.element.cssTextForScope(STYLE_CONTROLLER_SCOPE);
           proto = getPrototypeOf(proto);
         }
         if (cssText) {
-          var style = this.element.cssTextToScopeStyle(cssText,
-              STYLE_CONTROLLER_SCOPE);
-          // TODO(sorvell): for now these styles are not shimmed
-          // but we may need to shim them
-          Polymer.applyStyleToScope(style, scope);
+          this.installScopeCssText(cssText, scope);
         }
       }
     },
-    findStyleController: function() {
+    installScopeStyle: function(style, name) {
+      var scope = this.findStyleScope(), name = name || '';
+      if (scope && !this.scopeHasNamedStyle(scope, this.localName + name)) {
+        var cssText = '';
+        if (style instanceof Array) {
+          for (var i=0, l=style.length, s; (i<l) && (s=style[i]); i++) {
+            cssText += s.textContent + '\n\n';
+          }
+        } else {
+          cssText = style.textContent;
+        }
+        this.installScopeCssText(cssText, scope, name);
+      }
+    },
+    installScopeCssText: function(cssText, scope, name) {
+      scope = scope || this.findStyleScope();
+      name = name || '';
+      if (!scope) {
+        return;
+      }
+      if (window.ShadowDOMPolyfill) {
+        cssText = shimCssText(cssText, scope);
+      }
+      var style = this.element.cssTextToScopeStyle(cssText,
+          STYLE_CONTROLLER_SCOPE);
+      Polymer.applyStyleToScope(style, scope);
+      // cache that this style has been applied
+      scope._scopeStyles[this.localName + name] = true;
+    },
+    findStyleScope: function() {
       if (window.ShadowDOMPolyfill) {
         return wrap(document.head);
       } else {
@@ -65,9 +77,9 @@
         return n === document ? document.head : n;
       }
     },
-    scopeHasElementStyle: function(scope, descriptor) {
-      var rule = STYLE_SCOPE_ATTRIBUTE + '=' + this.localName + '-' + descriptor;
-      return scope.querySelector('style[' + rule + ']');
+    scopeHasNamedStyle: function(scope, name) {
+      scope._scopeStyles = scope._scopeStyles || {};
+      return scope._scopeStyles[name];
     }
   };
 
@@ -77,6 +89,15 @@
     return prototype.__proto__;
   }
 
+  function shimCssText(cssText, scope) {
+    if (scope === document.head) {
+      return cssText;
+    }
+    var selector = Platform.ShadowCSS.makeScopeSelector(scope.localName, 
+        scope.hasAttribute('is'));
+    return Platform.ShadowCSS.shimCssText(cssText, selector);
+  }
+
   // exports
 
   scope.api.instance.styles = styles;