Merge pull request #5518 from Polymer/fix-className-bindings-master

Ensure `className` bindings work correctly when `ShadyDOM.noPatch` is…
Polymer · Apr 20, 2019 · 07f1e19 · 07f1e19
2 parents 176c001 + 652fea9
commit 07f1e19
Show file tree

Hide file tree

Showing 7 changed files with 1,554 additions and 1,424 deletions.
diff --git a/lib/legacy/polymer.dom.js b/lib/legacy/polymer.dom.js
@@ -48,6 +48,9 @@ class DomApiNative {
    * @param {Node} node Node for which to create a Polymer.dom helper object.
    */
   constructor(node) {
+    if (window['ShadyDOM'] && window['ShadyDOM']['inUse']) {
+      window['ShadyDOM']['patch'](node);
+    }
     this.node = node;
   }
 
@@ -441,7 +444,7 @@ if (window['ShadyDOM'] && window['ShadyDOM']['inUse'] && window['ShadyDOM']['noP
   ]);
 
   forwardProperties(DomApiNative.prototype, [
-    'textContent', 'innerHTML'
+    'textContent', 'innerHTML', 'className'
   ]);
 }
 

diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js
@@ -727,6 +727,12 @@ function setupCompoundStorage(node, binding) {
     storage[target] = literals;
     // Configure properties with their literal parts
     if (binding.literal && binding.kind == 'property') {
+      // Note, className needs style scoping so this needs wrapping.
+      // We may also want to consider doing this for `textContent` and
+      // `innerHTML`.
+      if (target === 'className') {
+        node = wrap(node);
+      }
       node[target] = binding.literal;
     }
   }
@@ -1407,6 +1413,10 @@ export const PropertyEffects = dedupingMixin(superClass => {
       // implement a whitelist of tag & property values that should never
       // be reset (e.g. <input>.value && <select>.value)
       if (value !== node[prop] || typeof value == 'object') {
+        // Note, className needs style scoping so this needs wrapping.
+        if (prop === 'className') {
+          node = /** @type {!Node} */(wrap(node));
+        }
         node[prop] = value;
       }
     }

diff --git a/lib/utils/wrap.js b/lib/utils/wrap.js
@@ -19,5 +19,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  * @type {function(Node):Node}
  */
 export const wrap = (window['ShadyDOM'] && window['ShadyDOM']['noPatch'] && window['ShadyDOM']['wrap']) ?
-  window['ShadyDOM']['wrap'] : (n) => n;
+  window['ShadyDOM']['wrap'] :
+  (window['ShadyDOM'] ? (n) => ShadyDOM['patch'](n) : (n) => n);