Add support for styles with a shady-unscoped attribute

This is being added to 1.x and it's ported forward here so it can be used in hybrid mode.
Polymer · Oct 18, 2017 · d77e073 · d77e073
1 parent 314bada
commit d77e073
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 5 deletions.
diff --git a/lib/utils/style-gather.html b/lib/utils/style-gather.html
@@ -14,6 +14,8 @@
 
   const MODULE_STYLE_LINK_SELECTOR = 'link[rel=import][type~=css]';
   const INCLUDE_ATTR = 'include';
+  const SHADY_UNSCOPED_ATTR = 'shady-unscoped';
+  const unscopedStyleImportsMap = new WeakMap();
 
   function importModule(moduleId) {
     const /** Polymer.DomModule */ PolymerDomModule = customElements.get('dom-module');
@@ -109,8 +111,14 @@
           cssText += this.cssFromModules(include);
         }
         e.parentNode.removeChild(e);
-        cssText += baseURI ?
+        const styleCss = baseURI ?
           Polymer.ResolveUrl.resolveCss(e.textContent, baseURI) : e.textContent;
+        if (window.ShadyDOM && e.hasAttribute(SHADY_UNSCOPED_ATTR)) {
+          e.textContent = styleCss;
+          document.head.insertBefore(e, document.head.firstChild);
+        } else {
+          cssText += styleCss;
+        }
       }
       return cssText;
     },
@@ -145,9 +153,20 @@
           // under the HTMLImports polyfill, there will be no 'body',
           // but the import pseudo-doc can be used directly.
           let container = importDoc.body ? importDoc.body : importDoc;
-          cssText +=
-            Polymer.ResolveUrl.resolveCss(container.textContent,
-              importDoc.baseURI);
+          const importCss = Polymer.ResolveUrl.resolveCss(container.textContent,
+            importDoc.baseURI);
+          // support the shady-unscoped promoting styles to main document
+          if (window.ShadyDOM && p.hasAttribute(SHADY_UNSCOPED_ATTR)) {
+            if (!unscopedStyleImportsMap.has(importDoc)) {
+              unscopedStyleImportsMap.set(importDoc);
+              const style = document.createElement('style');
+              style.setAttribute(SHADY_UNSCOPED_ATTR, '');
+              style.textContent = importCss;
+              document.head.insertBefore(style, document.head.firstChild);
+            }
+          } else {
+            cssText += importCss;
+          }
         }
       }
       return cssText;

diff --git a/test/runner.html b/test/runner.html
@@ -73,7 +73,8 @@
       'unit/mixin-utils.html',
       'unit/mixin-behaviors.html',
       'unit/render-status.html',
-      'unit/dir.html'
+      'unit/dir.html',
+      'unit/shady-unscoped-style.html'
     ];
 
     // http://eddmann.com/posts/cartesian-product-in-javascript/

diff --git a/test/unit/shady-unscoped-style-import-css.html b/test/unit/shady-unscoped-style-import-css.html
@@ -0,0 +1,3 @@
+.import {
+  border: 2px solid yellow;
+}
diff --git a/test/unit/shady-unscoped-style-import.html b/test/unit/shady-unscoped-style-import.html
@@ -0,0 +1,26 @@
+<dom-module id="global-shared1">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+  <template>
+    <style shady-unscoped>
+      :root {
+        --zug: margin: 10px;
+      }
+
+      .happy {
+        @apply --zug;
+        border: 1px solid green;
+      }
+    </style>
+
+    <style>
+      .normal {
+        border: 3px solid orange;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<dom-module id="global-shared2">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+</dom-module>
+
diff --git a/test/unit/shady-unscoped-style.html b/test/unit/shady-unscoped-style.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="shady-unscoped-style-import.html">
+</head>
+<body>
+
+<custom-style>
+  <style is="custom-style">
+    html {
+      --foo: {
+        padding: 10px;
+      }
+    }
+  </style>
+</custom-style>
+
+ <dom-module id="my-element">
+
+    <template>
+      <style include="global-shared1 global-shared2">
+        :host {
+          display: block;
+        }
+
+        .happy {
+          @apply --foo;
+        }
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'my-element'
+      });
+    });
+    </script>
+
+  </dom-module>
+
+  <dom-module id="my-element2">
+
+    <template>
+      <style include="global-shared1">
+        :host {
+          display: block;
+        }
+
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({ is: 'my-element2'});
+    });
+    </script>
+
+  </dom-module>
+
+  <my-element></my-element>
+  <my-element2></my-element2>
+
+<script>
+  suite('shady-unscoped styles', function() {
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      if (Array.isArray(value)) {
+        assert.oneOf(computed[property], value, 'computed style incorrect for ' + property);
+      } else {
+        assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+      }
+    }
+
+    var el1 = document.querySelector('my-element');
+    var el2 = document.querySelector('my-element2');
+
+    test('unscoped styles apply', function() {
+      assertComputed(el1.$.fromStyle, '1px');
+      assertComputed(el1.$.fromImport, '2px');
+      assertComputed(el2.$.fromStyle, '1px');
+      assertComputed(el2.$.fromImport, '2px');
+    });
+
+    test('shared and @apply apply when used with unscoped styles', function() {
+      assertComputed(el1.$.fromStyle, '10px', 'padding');
+      assertComputed(el1.$.normal, '3px');
+      assertComputed(el2.$.normal, '3px');
+    })
+
+    test('unscoped styling de-duped in ShadyDOM', function() {
+      if (!window.ShadyDOM) {
+        this.skip();
+      }
+      assert.equal(document.head.querySelectorAll('style[shady-unscoped]').length, 2);
+    });
+
+    test('@apply does not apply under ShadyDOM for shady-unscoped styles', function() {
+      if (!window.ShadyDOM) {
+        this.skip();
+      }
+      assertComputed(el1.$.fromStyle, '0px', 'margin');
+      assertComputed(el2.$.fromStyle, '0px', 'margin');
+    })
+
+
+  });
+</script>
+</body>
+</html>