From 541fdfb8655e8d98695c6ee3eb521b076a051f6e Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 22 Sep 2016 11:43:41 -0700
Subject: [PATCH] Transform ::slotted() to ::content

Provides forward compatibility with Polymer 2.x and ShadowDOM v1

Fixes #3976
---
 src/lib/style-transformer.html         | 30 +++++++++++++++++++----
 test/unit/styling-scoped-elements.html | 25 ++++++++++++++++++-
 test/unit/styling-scoped.html          | 33 ++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
index 8ff71f0304..81c1ca9c9e 100644
--- a/src/lib/style-transformer.html
+++ b/src/lib/style-transformer.html
@@ -97,6 +97,18 @@
         var styles = element._styles;
         var cssText = '';
         var cssBuildType = element.__cssBuild;
+        var passthrough = settings.useNativeShadow || cssBuildType === 'shady';
+        var cb = callback;
+        if (passthrough) {
+          var self = this;
+          //
+          cb = function(rule) {
+            rule.selector = self._slottedToContent(rule.selector);
+            if (callback) {
+              callback(rule);
+            }
+          }
+        }
         for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
           var rules = styleUtil.rulesForStyle(s);
           // no need to shim selectors if settings.useNativeShadow, also
@@ -105,9 +117,9 @@
           // When there is a targeted build it will not be called for static shimming,
           // but when the property shim is used it is called and should opt out of
           // static shimming work when a proper build exists.
-          cssText += (settings.useNativeShadow || cssBuildType === 'shady') ?
-            styleUtil.toCssText(rules, callback) :
-            this.css(rules, element.is, element.extends, callback,
+          cssText += (passthrough) ?
+            styleUtil.toCssText(rules, cb) :
+            this.css(rules, element.is, element.extends, cb,
             element._scopeCssViaAttr) + '\n\n';
         }
         return cssText.trim();
@@ -176,6 +188,7 @@
         var hostContext = false;
         var self = this;
         selector = selector.trim();
+        selector = this._slottedToContent(selector);
         selector = selector.replace(CONTENT_START, HOST + ' $1');
         selector = selector.replace(SIMPLE_SELECTOR_SEP, function(m, c, s) {
           if (!stop) {
@@ -237,7 +250,7 @@
       _transformHostSelector: function(selector, hostScope) {
         var m = selector.match(HOST_PAREN);
         var paren = m && m[2].trim() || '';
-        if (paren) { 
+        if (paren) {
           if (!paren[0].match(SIMPLE_SELECTOR_PREFIX)) {
             // paren starts with a type selector
             var typeSelector = paren.split(SIMPLE_SELECTOR_PREFIX)[0];
@@ -257,7 +270,7 @@
             });
           }
         // if no paren, do a straight :host replacement.
-        // TODO(sorvell): this should not strictly be necessary but 
+        // TODO(sorvell): this should not strictly be necessary but
         // it's needed to maintain support for `:host[foo]` type selectors
         // which have been improperly used under Shady DOM. This should be
         // deprecated.
@@ -287,6 +300,12 @@
           this._transformSimpleSelector(selector.trim(), SCOPE_DOC_SELECTOR);
       },
 
+      // For forward compatibility with ShadowDOM v1 and Polymer 2.x,
+      // replace ::slotted(${inner}) with ::content > ${inner}
+      _slottedToContent: function(cssText) {
+        return cssText.replace(SLOTTED_PAREN, CONTENT + '> $1');
+      },
+
       SCOPE_NAME: 'style-scope'
     };
 
@@ -313,6 +332,7 @@
     var CLASS = 'class';
     var CONTENT_START = new RegExp('^(' + CONTENT + ')');
     var SELECTOR_NO_MATCH = 'should_not_match';
+    var SLOTTED_PAREN = /(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
 
     // exports
     return api;
diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
index 7791b8bd79..3f385d8577 100644
--- a/test/unit/styling-scoped-elements.html
+++ b/test/unit/styling-scoped-elements.html
@@ -606,4 +606,27 @@
   <script>
     Polymer({is: 'x-content'});
   </script>
-</dom-module>
\ No newline at end of file
+</dom-module>
+
+<dom-module id="x-slotted">
+  <template>
+    <style>
+    ::slotted(.auto-content) {
+      border: 2px solid orange;
+    }
+    .bar, ::slotted(.complex-child) {
+      border: 6px solid navy;
+    }
+    #container ::slotted(*) {
+      border: 8px solid green;
+    }
+    </style>
+    <slot></slot>
+    <div id="container">
+      <slot name="container"></slot>
+    </div>
+  </template>
+  <script>
+    Polymer({is: 'x-slotted'});
+  </script>
+</dom-module>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 6f821ea7f7..44d1660574 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -161,6 +161,39 @@
     assertComputed(d1, '6px');
   });
 
+  test('auto ::slotted selector', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.classList.add('auto-content');
+    d1.textContent = 'auto-content';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '2px');
+  });
+
+  test('::slotted + child in complex selector', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.classList.add('complex-child');
+    d1.textContent = 'complex-child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '6px');
+  });
+
+  test('::slotted + named slot', function() {
+    var x = document.createElement('x-slotted');
+    var d1 = document.createElement('div');
+    d1.setAttribute('slot', 'container')
+    d1.textContent = 'named slot child';
+    document.body.appendChild(x);
+    Polymer.dom(x).appendChild(d1);
+    Polymer.dom.flush();
+    assertComputed(d1, '8px');
+  });
+
   test('::shadow selectors', function() {
     assertComputed(styled.$.child.$.shadow, '7px');
   });