Merge pull request #245 from vicb/0313-deepc

Add support for the >>> selector in ShadowCSS

Author: addyosmani

src/ShadowCSS/ShadowCSS.js

@@ -578,13 +578,15 @@ var selectorRe = /([^{]*)({[\s\S]*?})/gim,
     polyfillHostRe = new RegExp(polyfillHost, 'gim'),
     polyfillHostContextRe = new RegExp(polyfillHostContext, 'gim'),
     shadowDOMSelectorsRe = [
-      /\^\^/g,
-      /\^/g,
-      /\/shadow\//g,
-      /\/shadow-deep\//g,
+      />>>/g,
       /::shadow/g,
-      /\/deep\//g,
-      /::content/g
+      /::content/g,
+      // Deprecated selectors
+      /\/deep\//g, // former >>>
+      /\/shadow\//g, // former ::shadow
+      /\/shadow-deep\//g, // former /deep/
+      /\^\^/g,     // former /shadow/
+      /\^/g        // former /shadow-deep/
     ];
 
 function stylesToCssText(styles, preserveComments) {

src/ShadowDOM/querySelector.js

@@ -49,7 +49,7 @@
   }
 
   function shimSelector(selector) {
-    return String(selector).replace(/\/deep\/|::shadow/g, ' ');
+    return String(selector).replace(/\/deep\/|::shadow|>>>/g, ' ');
   }
 
   function shimMatchesSelector(selector) {
@@ -71,7 +71,7 @@
       )
       // From ShadowCSS, will be replaced by space
       .replace(
-        /\^|\/shadow\/|\/shadow-deep\/|::shadow|\/deep\/|::content/g,
+        /\^|\/shadow\/|\/shadow-deep\/|::shadow|\/deep\/|::content|>>>/g,
         ' '
       );
   }

tests/ShadowCSS/html/combinators-shadow.html

@@ -40,6 +40,10 @@
       x-bar /deep/ .zot {
         color: white;
       }
+
+      x-bar >>> .zot-2 {
+        color: white;
+      }
     </style>
     <div class="foo">orange</div>
     <div class="foo2">green</div>
@@ -58,6 +62,7 @@
 
   <template id="x-zot">
     <div class="zot">Zot</div>
+    <div class="zot-2">Zot</div>
     <div class="zot-inner">inner</div>
   </template>
 
@@ -84,11 +89,18 @@
       var xZot = foo.shadowRoot.querySelector('x-bar').shadowRoot
           .querySelector('x-zot');
       var zot = xZot.shadowRoot.querySelector('.zot');
+      var zot2 = xZot.shadowRoot.querySelector('.zot-2');
 
       chai.assert.equal(getComputedStyle(zot).backgroundColor, 'rgb(0, 128, 0)',
-        '^ styles are applied (backgroundColor)');
+        '::shadow styles are applied (backgroundColor)');
       chai.assert.equal(getComputedStyle(zot).color, 'rgb(255, 255, 255)',
-        '^^ styles are applied (color)');
+        '/deep/ styles are applied (color)');
+
+      // TODO(vicb): remove the if when >>> get supported by browsers
+      if (window.ShadowDOMPolyfill) {
+        chai.assert.equal(getComputedStyle(zot2).color, 'rgb(255, 255, 255)',
+          '>>> styles are applied (color)');
+      }
 
       // NOTE: native import styles not shimmed under SD polyfill
       var unsupported = window.ShadowDOMPolyfill && HTMLImports.useNative;

tests/ShadowDOM/js/Document.js

@@ -216,6 +216,9 @@ htmlSuite('Document', function() {
 
     assert.equal(aa1, document.querySelector('div /deep/ aa'));
     assert.equal(bb, document.querySelector('div /deep/ bb'));
+
+    assert.equal(aa1, document.querySelector('div >>> aa'));
+    assert.equal(bb, document.querySelector('div >>> bb'));
   });
 
   test('querySelectorAll deep', function() {
@@ -230,14 +233,18 @@ htmlSuite('Document', function() {
 
     div.offsetHeight;
 
-    var list = document.querySelectorAll('div /deep/ aa');
-    assert.equal(2, list.length);
-    assert.equal(aa1, list[0]);
-    assert.equal(aa2, list[1]);
+    ['div /deep/ aa', 'div >>> aa'].forEach(function(selector) {
+      var list = div.querySelectorAll(selector);
+      assert.equal(2, list.length);
+      assert.equal(aa1, list[0]);
+      assert.equal(aa2, list[1]);
+    });
 
-    list = document.querySelectorAll('div /deep/ bb');
-    assert.equal(1, list.length);
-    assert.equal(bb, list[0]);
+    ['div /deep/ bb', 'div >>> bb'].forEach(function(selector) {
+      var list = div.querySelectorAll(selector);
+      assert.equal(1, list.length);
+      assert.equal(bb, list[0]);
+    });
   });
 
   test('addEventListener', function() {

tests/ShadowDOM/js/Element.js

@@ -128,14 +128,18 @@ suite('Element', function() {
 
     div.offsetHeight;
 
-    var list = div.querySelectorAll('div /deep/ aa');
-    assert.equal(2, list.length);
-    assert.equal(aa1, list[0]);
-    assert.equal(aa2, list[1]);
-
-    list = div.querySelectorAll('div /deep/ bb');
-    assert.equal(1, list.length);
-    assert.equal(bb, list[0]);
+    ['div /deep/ aa', 'div >>> aa'].forEach(function(selector) {
+      var list = div.querySelectorAll(selector);
+      assert.equal(2, list.length);
+      assert.equal(aa1, list[0]);
+      assert.equal(aa2, list[1]);
+    });
+
+    ['div /deep/ bb', 'div >>> bb'].forEach(function(selector) {
+      var list = div.querySelectorAll(selector);
+      assert.equal(1, list.length);
+      assert.equal(bb, list[0]);
+    });
   });
 
   test('querySelectorAll ::shadow', function() {