Fix class name bindings

lib/legacy/polymer.dom.js

@@ -441,7 +441,7 @@ if (window['ShadyDOM'] && window['ShadyDOM']['inUse'] && window['ShadyDOM']['noP
   ]);
 
   forwardProperties(DomApiNative.prototype, [
-    'textContent', 'innerHTML'
+    'textContent', 'innerHTML', 'className'
   ]);
 }
 

lib/mixins/property-effects.js

@@ -738,6 +738,10 @@ 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.
+      if (target === 'className') {
+        node = wrap(node);
+      }
       node[target] = binding.literal;
     }
   }
@@ -1428,6 +1432,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 = wrap(node);
+        }
         node[prop] = value;
       }
     }

lib/utils/settings.js

@@ -70,7 +70,7 @@ export const setSanitizeDOMValue = function(newSanitizeDOMValue) {
  * scrolling performance.
  * Defaults to `false` for backwards compatibility.
  */
-export let passiveTouchGestures = false;
+export let passiveTouchGestures = window.Polymer && window.Polymer.passiveTouchGestures || undefined;
 
 /**
  * Sets `passiveTouchGestures` globally for all elements using Polymer Gestures.
@@ -88,7 +88,7 @@ export const setPassiveTouchGestures = function(usePassive) {
  * disallowed, `<dom-bind>` is disabled, and `<dom-if>`/`<dom-repeat>`
  * templates will only evaluate in the context of a trusted element template.
  */
-export let strictTemplatePolicy = false;
+export let strictTemplatePolicy = window.Polymer && window.Polymer.strictTemplatePolicy || undefined;
 
 /**
  * Sets `strictTemplatePolicy` globally for all elements
@@ -107,7 +107,7 @@ export const setStrictTemplatePolicy = function(useStrictPolicy) {
  * getter and the `html` tag function.  To enable legacy loading of templates
  * via dom-module, set this flag to true.
  */
-export let allowTemplateFromDomModule = false;
+export let allowTemplateFromDomModule = window.Polymer && window.Polymer.allowTemplateFromDomModule || undefined;
 
 /**
  * Sets `lookupTemplateFromDomModule` globally for all elements
@@ -127,7 +127,7 @@ export const setAllowTemplateFromDomModule = function(allowDomModule) {
  * If no includes or relative urls are used in styles, these steps can be
  * skipped as an optimization.
  */
-export let legacyOptimizations = false;
+export let legacyOptimizations = window.Polymer && window.Polymer.legacyOptimizations || undefined;
 
 /**
  * Sets `legacyOptimizations` globally for all elements to enable optimizations
@@ -144,7 +144,7 @@ export const setLegacyOptimizations = function(useLegacyOptimizations) {
 /**
  * Setting to add warnings useful when migrating from Polymer 1.x to 2.x.
  */
-export let legacyWarnings = false;
+export let legacyWarnings = window.Polymer && window.Polymer.legacyWarnings || undefined;
 
 /**
  * Sets `legacyWarnings` globally for all elements to migration warnings.
@@ -160,7 +160,7 @@ export const setLegacyWarnings = function(useLegacyWarnings) {
  * Setting to perform initial rendering synchronously when running under ShadyDOM.
  * This matches the behavior of Polymer 1.
  */
-export let syncInitialRender = false;
+export let syncInitialRender = window.Polymer && window.Polymer.syncInitialRender || undefined;
 
 /**
  * Sets `syncInitialRender` globally for all elements to enable synchronous
@@ -179,7 +179,7 @@ export const setSyncInitialRender = function(useSyncInitialRender) {
  * observers around undefined values. Observers and computed property methods
  * are not called until no argument is undefined.
  */
-export let legacyUndefined = false;
+export let legacyUndefined = window.Polymer && window.Polymer.legacyUndefined || undefined;
 
 /**
  * Sets `legacyUndefined` globally for all elements to enable legacy
@@ -197,7 +197,7 @@ export const setLegacyUndefined = function(useLegacyUndefined) {
  * Setting to retain the legacy Polymer 1 behavior for setting properties. Does
  * not batch property sets.
  */
-export let legacyNoBatch = false;
+export let legacyNoBatch = window.Polymer && window.Polymer.legacyNoBatch || undefined;
 
 /**
  * Sets `legacyNoBatch` globally for all elements to enable legacy
@@ -216,7 +216,7 @@ export const setLegacyNoBatch = function(useLegacyNoBatch) {
  * fire change events with respect to other effects.  In Polymer 1.x they fire
  * before observers; in 2.x they fire after all other effect types.
  */
-export let legacyNotifyOrder = false;
+export let legacyNotifyOrder = window.Polymer && window.Polymer.legacyNotifyOrder || undefined;
 
 /**
  * Sets `legacyNotifyOrder` globally for all elements to enable legacy

test/unit/polymer-dom-nopatch.html

@@ -72,6 +72,37 @@
 </script>
   </dom-module>
 
+<dom-module id="x-class-bindings">
+<template>
+  <style>
+    .a {
+      border: 2px solid orange;
+    }
+
+    .aa {
+      border: 12px solid red;
+    }
+
+    .b {
+      padding: 4px;
+    }
+  </style>
+  <div>
+    <div id="class" class$="[[clazz]] b">class</div>
+    <div id="className" class-name="[[clazz]] b">class</div>
+  </div>
+</template>
+<script type="module">
+  import { Polymer } from '../../polymer-legacy.js';
+  Polymer({
+    properties: {
+      clazz: {type: String}
+    },
+    is: 'x-class-bindings'
+  });
+</script>
+</dom-module>
+
    <test-fixture id="scoped">
     <template>
       <x-event-scoped></x-event-scoped>
@@ -493,6 +524,37 @@
     assert.equal(el.className, 'foo');
   });
 
+  test('className', function() {
+    dom(el).className = 'foo';
+    assert.isTrue(el.classList.contains('foo'));
+  });
+
+  test('class bindings work and remained scoped', function() {
+    const el = document.createElement('x-class-bindings');
+    document.body.appendChild(el);
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    el.clazz = 'a';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    el.clazz = 'aa';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.isTrue(el.$.class.classList.contains('style-scope'));
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    assert.isTrue(el.$.className.classList.contains('style-scope'));
+    document.body.removeChild(el);
+  })
+
 });
 </script>
 

test/unit/polymer-dom.html

@@ -67,7 +67,38 @@
   is: 'x-focusable-in-shadow'
 });
 </script>
-  </dom-module>
+</dom-module>
+
+<dom-module id="x-class-bindings">
+<template>
+  <style>
+    .a {
+      border: 2px solid orange;
+    }
+
+    .aa {
+      border: 12px solid red;
+    }
+
+    .b {
+      padding: 4px;
+    }
+  </style>
+  <div>
+    <div id="class" class$="[[clazz]] b">class</div>
+    <div id="className" class-name="[[clazz]] b">class</div>
+  </div>
+</template>
+<script type="module">
+  import { Polymer } from '../../polymer-legacy.js';
+  Polymer({
+    properties: {
+      clazz: {type: String}
+    },
+    is: 'x-class-bindings'
+  });
+</script>
+</dom-module>
 
    <test-fixture id="scoped">
     <template>
@@ -480,6 +511,31 @@
     assert.equal(el.className, 'foo');
   });
 
+  test('className', function() {
+    dom(el).className = 'foo';
+    assert.isTrue(el.classList.contains('foo'));
+  });
+
+  test('class bindings', function() {
+    const el = document.createElement('x-class-bindings');
+    document.body.appendChild(el);
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '0px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    el.clazz = 'a';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '2px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    el.clazz = 'aa';
+    assert.equal(getComputedStyle(el.$.class)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.class)['padding-top'], '4px');
+    assert.equal(getComputedStyle(el.$.className)['border-top-width'], '12px');
+    assert.equal(getComputedStyle(el.$.className)['padding-top'], '4px');
+    document.body.removeChild(el);
+  })
+
 });
 </script>