Only style elements with templates

dom-repeat and/or dom-if booting before custom-style is registered can break the complicated loading strategy of ShadyCSS. By only calling ShadyCSS for elements with templates, we both fix this issue and improve performance for template-less element booting Fixes #4521
Polymer · Apr 11, 2017 · 2356f7b · 2356f7b
1 parent b6d4500
commit 2356f7b
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 1 deletion.
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
@@ -596,7 +596,7 @@
        * @override
        */
       connectedCallback() {
-        if (window.ShadyCSS) {
+        if (window.ShadyCSS && this._template) {
           window.ShadyCSS.styleElement(this);
         }
         if (!this.__dataInitialized) {

diff --git a/test/runner.html b/test/runner.html
@@ -36,6 +36,7 @@
       'unit/styling-cross-scope-var.html',
       'unit/styling-cross-scope-apply.html',
       'unit/styling-cross-scope-unknown-host.html',
+      'unit/styling-only-with-template.html',
       'unit/custom-style.html',
       'unit/custom-style-late.html',
       'unit/custom-style-async.html',

diff --git a/test/unit/styling-only-with-template.html b/test/unit/styling-only-with-template.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+
+<body>
+  <custom-style>
+    <style is="custom-style">
+      html {
+        --mixin: {
+          border: 2px solid rgb(255, 0, 0);
+        };
+      }
+    </style>
+  </custom-style>
+
+  <custom-style>
+    <style is="custom-style">
+      #target {
+        @apply --mixin;
+      }
+    </style>
+  </custom-style>
+
+  <div id="target"></div>
+  <dom-if><template></template></dom-if>
+  <dom-repeat><template></template></dom-repeat>
+
+  <script>
+    addEventListener('WebComponentsReady', () => {
+      class XFoo extends Polymer.Element {
+        connectedCallback() {
+          this.spy = sinon.spy(window.ShadyCSS, 'styleElement');
+          super.connectedCallback();
+          this.spy.restore();
+        }
+      }
+      customElements.define('x-foo', XFoo);
+    })
+  </script>
+
+  <script>
+      suite('styling-only-template', function () {
+
+        function assertComputed(element, value, pseudo) {
+          var computed = getComputedStyle(element, pseudo);
+          assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+        }
+
+        test('elements without templates do not call ShadyCSS', () => {
+          let el = document.createElement('x-foo');
+          document.body.appendChild(el);
+          assert.ok(el.spy);
+          assert.isTrue(el.spy.notCalled);
+        });
+
+        test('dom-repeat and dom-if do not break custom-style', () => {
+          // force custom-style flushing
+          window.ShadyCSS.styleDocument();
+          assertComputed(target, '2px');
+        });
+      });
+  </script>
+</body>