Fixes Polymer#35 by keeping a separate cache of polyfilled stylesheet…

…s for a given scope.
nevir · Jun 26, 2014 · 057b078 · 057b078
1 parent da81f52
commit 057b078
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/src/instance/styles.js b/src/instance/styles.js
@@ -67,7 +67,7 @@
           STYLE_CONTROLLER_SCOPE);
       Polymer.applyStyleToScope(style, scope);
       // cache that this style has been applied
-      scope._scopeStyles[this.localName + name] = true;
+      this.styleCacheForScope(scope)[this.localName + name] = true;
     },
     findStyleScope: function(node) {
       // find the shadow root that contains this element
@@ -78,10 +78,20 @@
       return n;
     },
     scopeHasNamedStyle: function(scope, name) {
-      scope._scopeStyles = scope._scopeStyles || {};
-      return scope._scopeStyles[name];
+      var cache = this.styleCacheForScope(scope);
+      return cache[name];
+    },
+    styleCacheForScope: function(scope) {
+      if (window.ShadowDOMPolyfill) {
+        var scopeName = scope.host ? scope.host.localName : scope.localName;
+        return polyfillScopeStyleCache[scopeName] || (polyfillScopeStyleCache[scopeName] = {});
+      } else {
+        return scope._scopeStyles = (scope._scopeStyles || {});
+      }
     }
   };
+
+  var polyfillScopeStyleCache = {};
 
   // NOTE: use raw prototype traversal so that we ensure correct traversal
   // on platforms where the protoype chain is simulated via __proto__ (IE10)

diff --git a/test/html/styling/sheet-scope.html b/test/html/styling/sheet-scope.html
@@ -19,11 +19,22 @@
 </head>
 <body>
   <x-stylish></x-stylish>
+  <x-stylish></x-stylish>
+  <x-stylish></x-stylish>
+  <x-stylish></x-stylish>
+  <x-stylish></x-stylish>
+  <x-stylish></x-stylish>
+
   <div id="node1" class="global-stylish controller-stylish2">1</div>
   <div id="node2" class="controller-stylish controller-stylish2">2</div>
   <div id="node3" class="yellow12">3</div>
   <div id="node4" class="red1">4</div>
 
+  <x-other></x-other>
+  <x-other></x-other>
+  <x-other></x-other>
+  <x-other></x-other>
+  <x-other></x-other>
   <x-other></x-other>
 
   <polymer-element name="x-stylish" cache-csstext>
@@ -49,7 +60,7 @@
     </template>
     <script>
       Polymer('x-stylish', {
-        created: function() {
+        attached: function() {
           this.installControllerStyles();
         }
       });
@@ -58,6 +69,11 @@
 
   <polymer-element name="x-other" noscript>
     <template>
+      <x-stylish></x-stylish>
+      <x-stylish></x-stylish>
+      <x-stylish></x-stylish>
+      <x-stylish></x-stylish>
+      <x-stylish></x-stylish>
       <x-stylish></x-stylish>
       <div id="inner1" class="controller-stylish controller-stylish2">stylish</div>
       <div id="inner2" class="yellow12"></div>
@@ -87,6 +103,14 @@
       test(xother.$.inner1, 'backgroundColor', 'rgb(0, 0, 255)');
       test(xother.$.inner1, 'fontStyle', 'italic');
       test(xother.$.inner2, 'backgroundColor', 'rgb(255, 255, 0)');
+
+      // de-duping styles.
+      if (window.ShadowDOMPolyfill) {
+        chai.assert.equal(document.head.querySelectorAll('style[element=x-stylish-controller]').length, 2, 'styles are properly de-duped');
+      } else {
+        chai.assert.equal(document.head.querySelectorAll('style[element=x-stylish-controller').length, 1, 'styles are properly de-duped');
+        chai.assert.equal(xother.shadowRoot.querySelectorAll('style[element=x-stylish-controller').length, 1, 'styles are properly de-duped');
+      }
       done();
     });
   </script>