From f3116fde8a3bfd458ec33b0b5b35ef6ee2cd9ac4 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 19 Jul 2017 16:02:26 -0700
Subject: [PATCH] Support `:host > *` as well

---
 src/lib/style-transformer.html |  3 ++-
 test/unit/custom-style.html    | 12 ++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
index 5333e26314..06ff23750d 100644
--- a/src/lib/style-transformer.html
+++ b/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;
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index 54a4cf7ea0..3e926a51a7 100644
--- a/test/unit/custom-style.html
+++ b/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() {