Skip to content

Commit

Permalink
Fix className on browsers without good native accessors
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
Steven Orvell committed Apr 11, 2019
1 parent a1c67e4 commit b13e656
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 3 deletions.
3 changes: 3 additions & 0 deletions lib/legacy/polymer.dom.js
Expand Up @@ -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;
}

Expand Down
3 changes: 2 additions & 1 deletion lib/utils/wrap.js
Expand Up @@ -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);

23 changes: 21 additions & 2 deletions test/unit/polymer-dom.html
Expand Up @@ -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>
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit b13e656

Please sign in to comment.