diff --git a/src/wrapper.js b/src/wrapper.js index bd83997..6cb1b09 100644 --- a/src/wrapper.js +++ b/src/wrapper.js @@ -235,6 +235,14 @@ class Wrapper { this.node[utils.SHADY_PREFIX + 'slot'] = value; } + get className() { + return this.node[utils.SHADY_PREFIX + 'className']; + } + + set className(value) { + return this.node[utils.SHADY_PREFIX + 'className'] = value; + } + } eventPropertyNames.forEach(name => { diff --git a/tests/sync-style-scoping.html b/tests/sync-style-scoping.html index ff6e175..728738f 100644 --- a/tests/sync-style-scoping.html +++ b/tests/sync-style-scoping.html @@ -315,6 +315,22 @@ }); }); + suite('mutation', function() { + test('setting class and className works and preserves scoping', function() { + const el = document.createElement('api-element'); + ShadyDOM.wrap(arena).appendChild(el); + const inner = ShadyDOM.wrap(ShadyDOM.wrap(el).shadowRoot).querySelector('#internal'); + const innerWrapper = ShadyDOM.wrap(inner); + assert.equal(csfn(inner), 'api-element'); + innerWrapper.setAttribute('class', 'a'); + assert.isTrue(inner.classList.contains('a')); + assert.equal(csfn(inner), 'api-element'); + innerWrapper.className = 'b'; + assert.isTrue(inner.classList.contains('b')); + assert.equal(csfn(inner), 'api-element'); + }) + }); + suite('elements not owned by the main document', function() { let el; const template = document.createElement('template');