From b13e656fae4a18af407a280386acf656faeea991 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Thu, 11 Apr 2019 10:36:50 -0700
Subject: [PATCH] Fix `className` on browsers without good native accessors

* Ensure `wrap` falls back to using `ShadyDOM.patch` when `noPatch` is not in use so that `className` can be used.
* Ensure `Polymer.dom` uses `patch` when `noPatch` is not in use so that `className` can be used.
---
 lib/legacy/polymer.dom.js  |  3 +++
 lib/utils/wrap.js          |  3 ++-
 test/unit/polymer-dom.html | 23 +++++++++++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/lib/legacy/polymer.dom.js b/lib/legacy/polymer.dom.js
index e81a6c2519..478bbc9665 100644
--- 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;
   }
 
diff --git a/lib/utils/wrap.js b/lib/utils/wrap.js
index ece21a4e1b..ce2dbe8701 100644
--- 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);
 
diff --git a/test/unit/polymer-dom.html b/test/unit/polymer-dom.html
index 772ce48827..77b36780be 100644
--- a/test/unit/polymer-dom.html
+++ b/test/unit/polymer-dom.html
@@ -30,6 +30,17 @@
 </script>
   </dom-module>
 
+  <dom-module id="x-scoped-node">
+    <template>
+      <div><div id="first">first</div></div>
+    </template>
+    <script type="module">
+import { Polymer } from '../../polymer-legacy.js';
+Polymer({
+  is: 'x-scoped-node'
+});
+</script>
+
   <dom-module id="x-container-slot">
     <template>
       <x-slot id="container"><div id="first">first</div><slot id="slot"></slot><div id="last">last</div></x-slot>
@@ -512,8 +523,16 @@
   });
 
   test('className', function() {
-    dom(el).className = 'foo';
-    assert.isTrue(el.classList.contains('foo'));
+    const el = document.createElement('x-scoped-node');
+    document.body.appendChild(el);
+    const testEl = el.$.first;
+    const testElDom = dom(testEl);
+    testEl.className = 'foo';
+    assert.isTrue(testEl.classList.contains('foo'));
+    if (window['ShadyDOM']) {
+      assert.isTrue(testEl.classList.contains('style-scope'));
+    }
+    document.body.removeChild(el);
   });
 
   test('class bindings', function() {