Translate :root to :host > * for element styles

Support `:host > *` as root rules for CSS Custom Properties

Fixes #3991

Author: dfreedm

src/lib/style-properties.html

@@ -285,8 +285,10 @@
         return {properties: props, key: o};
       },
 
+      _rootSelector: /(?:^:root)|(?::host\s*>\s*\*)/,
+
       _checkRoot: function(hostScope, selector) {
-        return selector.indexOf(':root') === 0 ||
+        return Boolean(selector.match(this._rootSelector)) ||
           (hostScope === 'html' && selector.indexOf('html') === 0);
       },
 
@@ -302,7 +304,7 @@
         'html';
         var parsedSelector = rule.parsedSelector;
         var isRoot = this._checkRoot(hostScope, parsedSelector);
-        var isHost = parsedSelector.indexOf(':host') === 0;
+        var isHost = !isRoot && parsedSelector.indexOf(':host') === 0;
         // build info is either in scope (when scope is an element) or in the style
         // when scope is the default scope; note: this allows default scope to have
         // mixed mode built and unbuilt styles.
@@ -313,10 +315,6 @@
           // :host -> x-foo for elements, but sub-rules have .x-foo in them
           isHost = !isRoot && parsedSelector.indexOf(hostScope) === 0;
         }
-        if (cssBuild === 'shadow') {
-          isRoot = parsedSelector === ':host > *' || this._checkRoot(hostScope, parsedSelector);
-          isHost = isHost && !isRoot;
-        }
         if (!isRoot && !isHost) {
           return;
         }

src/lib/style-transformer.html

@@ -104,6 +104,7 @@
           var self = this;
           cb = function(rule) {
             rule.selector = self._slottedToContent(rule.selector);
+            rule.selector = rule.selector.replace(ROOT, ':host > *');
             if (callback) {
               callback(rule);
             }
@@ -189,6 +190,7 @@
         var self = this;
         selector = selector.trim();
         selector = this._slottedToContent(selector);
+        selector = selector.replace(ROOT, ':host > *');
         selector = selector.replace(CONTENT_START, HOST + ' $1');
         selector = selector.replace(SIMPLE_SELECTOR_SEP, function(m, c, s) {
           if (!stop) {

test/unit/styling-cross-scope-var.html

@@ -831,6 +831,32 @@
   </script>
 </dom-module>
 
+<dom-module id="root-styles">
+  <template>
+    <style>
+    :root {
+      --root-border: 2px solid black;
+    }
+    :host > * {
+      --host-star-border: 10px solid orange;
+    }
+    #root {
+      border: var(--root-border);
+    }
+    #host {
+      border: var(--host-star-border);
+    }
+    </style>
+    <div id="root"></div>
+    <div id="host"></div>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'root-styles'});
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -1073,8 +1099,6 @@
     assertComputed(x.$.child, '6px');
   });
 
-
-
   test('styles update based on root customStyle changes', function() {
     assertComputed(styled.$.dynamic, '0px');
     Polymer.StyleDefaults.customStyle['--dynamic'] = '4px solid navy';
@@ -1234,6 +1258,7 @@
     e.updateStyles();
     assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color');
   });
+
   test('updateStyles removes the correct number of style properties', function() {
     if (!Polymer.Settings.useNativeCSSProperties) {
       this.skip();
@@ -1274,6 +1299,14 @@
     CustomElements.takeRecords();
     assertComputed(e.$.child, '5px');
   });
+
+  test(':root and :host > * rules apply to all shadowroot children', function() {
+    var e = document.createElement('root-styles');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e.$.root, '2px');
+    assertComputed(e.$.host, '10px');
+  });
 });
 
 </script>

test/unit/styling-scoped-elements.html

@@ -630,3 +630,26 @@
     Polymer({is: 'x-slotted'});
   </script>
 </dom-module>
+
+<dom-module id="root-styles">
+  <template>
+    <style>
+    :root {
+      color: rgb(123, 123, 123);
+      --root-padding: 10px;
+    }
+    :host > * {
+      border: 2px solid black;
+      --host-margin: 10px;
+    }
+    #child {
+      padding: var(--root-padding);
+      margin: var(--host-margin);
+    }
+    </style>
+    <div id="child">Child</div>
+  </template>
+  <script>
+  Polymer({is: 'root-styles'});
+  </script>
+</dom-module>

test/unit/styling-scoped.html

@@ -329,6 +329,15 @@
     assertComputed(e.$.bar3, '6px');
   });
 
+  test('ShadowRoot-wide selectors', function() {
+    var e = document.createElement('root-styles');
+    document.body.appendChild(e);
+    // :root
+    assertComputed(e.$.child, 'rgb(123, 123, 123)', 'color');
+    // :host > *
+    assertComputed(e.$.child, '2px');
+  });
+
     suite('scoped-styling-shady-only', function() {
 
       suiteSetup(function() {