make :host(.bar:not(.zot)) > #wahtever { work

supports 1 level of nesting inside the :host(…)

src/ShadowCSS.js

@@ -521,7 +521,9 @@ var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
     // note: :host pre-processed to -shadowcsshost.
     polyfillHost = '-shadowcsshost',
     cssColonHostRe = new RegExp('(' + polyfillHost +
-        ')(?:\\(([^)]*)\\))?([^,{]*)', 'gim'),
+        ')(?:\\((' +
+        '(?:\\([^)(]*\\)|[^)(]*)+?' +
+        ')\\))?([^,{]*)', 'gim'),
     selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
     hostRe = /@host/gim,
     colonHostRe = /\:host/gim,

test/html/styling/colon-host.html

@@ -28,6 +28,10 @@
         background: black;
         color: white;
       }
+
+      :host(.opened:not(.animating)) div {
+        background: blue;
+      }
     </style>
     <div>background</div>
   </template>
@@ -162,6 +166,11 @@ <h4>Expected: 20px padding</h4>
   <h4>Expected: blue background</h4>
      <a href="#" is="x-anchor">Test Link</a>
   </div>
+  <h4>Expected: blue background</h4>
+     <div class="opened">
+       <x-foo class="foo3"></x-foo>
+     </div>
+  </div>
 
   <script>
     document.addEventListener('WebComponentsReady', function() {
@@ -173,6 +182,11 @@ <h4>Expected: blue background</h4>
       chai.assert.equal(getComputedStyle(foo2).backgroundColor, 'rgb(0, 0, 0)',
         ':host styles are conditionally applied (backgroundColor)');  
 
+      var foo3 = document.querySelector('x-foo.foo3');
+      var foo3div = foo3.querySelector('div');
+      chai.assert.equal(getComputedStyle(foo3div).backgroundColor, 'rgb(0, 0, 255)',
+        ':host(:not()) styles are applied (backgroundColor)');  
+
       var scope = document.querySelector('x-scope');
       chai.assert.equal(getComputedStyle(scope).backgroundColor, 'rgb(255, 0, 0)',
         ':host styles matching :scope  are applied (backgroundColor)');