Support :host > * as well

Author: dfreedm

src/lib/style-transformer.html

@@ -295,7 +295,7 @@
         // handle 2.x rules like `:host, html {}`
         var parts = rule.selector.split(COMPLEX_SELECTOR_SEP);
         parts = parts.filter(function(part) {
-          return part.trim() !== HOST;
+          return !part.match(HOST_OR_HOST_GT_STAR);
         });
         rule.selector = parts.join(COMPLEX_SELECTOR_SEP);
       },
@@ -339,6 +339,7 @@
     var CONTENT_START = new RegExp('^(' + CONTENT + ')');
     var SELECTOR_NO_MATCH = 'should_not_match';
     var SLOTTED_PAREN = /(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
+    var HOST_OR_HOST_GT_STAR = /:host(?:\s*>\s*\*)?/;
 
     // exports
     return api;

test/unit/custom-style.html

@@ -143,7 +143,10 @@
   </style>
   <style is="custom-style">
     :host, html {
-      --polymer-2-root: 10px solid rgb(123, 123, 123);
+      --polymer-2-shared-host: 10px solid rgb(123, 123, 123);
+    }
+    :host > *, html {
+      --polymer-2-shared-host-gt-star: 5px dotted orange;
     }
   </style>
 </head>
@@ -325,9 +328,13 @@
     <template>
       <style>
         :host {
-          border: var(--polymer-2-root);
+          border: var(--polymer-2-shared-host);
+        }
+        #foo {
+          border: var(--polymer-2-shared-host-gt-star);
         }
       </style>
+      <div id="foo"></div>
     </template>
   </dom-module>
 
@@ -409,6 +416,7 @@
       test('polymer 2 shared styles applied', function() {
         var polymer2 = document.querySelector('polymer-2-root');
         assertComputed(polymer2, '10px');
+        assertComputed(polymer2.$.foo, '5px');
       })
 
       test('custom properties registered as defaults', function() {