Skip to content

Commit f226a78

Browse files
committed
[scoped-custom-element-registry] Stringify values passed to setAttribute()
Any value set via `setAttribute` gets converted to a plain string, because that's how HTML attributes work. However, this polyfil was missing this step, and it was passing the raw non-string value to the custom element attributeChangedCallback. This behavior is wrong, and it is a regression when compared to not using the polyfill. Fixes webcomponents#607, supersedes webcomponents#616
1 parent 16a0a1e commit f226a78

File tree

2 files changed

+10
-1
lines changed

2 files changed

+10
-1
lines changed

packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -520,7 +520,8 @@ const patchAttributes = (
520520
if (observedAttributes.has(name)) {
521521
const old = this.getAttribute(name);
522522
setAttribute.call(this, name, value);
523-
attributeChangedCallback.call(this, name, old, value);
523+
const newValue = this.getAttribute(name);
524+
attributeChangedCallback.call(this, name, old, newValue);
524525
} else {
525526
setAttribute.call(this, name, value);
526527
}

packages/scoped-custom-element-registry/test/Element.test.html.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,21 @@ describe('Element', () => {
114114
it('should call setAttribute', () => {
115115
const {tagName, CustomElementClass} = getObservedAttributesTestElement([
116116
'foo',
117+
'boo',
118+
'int',
117119
]);
118120
customElements.define(tagName, CustomElementClass);
119121
const $el = document.createElement(tagName);
120122

121123
$el.setAttribute('foo', 'bar');
124+
$el.setAttribute('boo', true);
125+
$el.setAttribute('boo', false);
126+
$el.setAttribute('int', 42);
122127
expect($el.attributeChanges).to.be.deep.equal([
123128
{name: 'foo', old: null, value: 'bar'},
129+
{name: 'boo', old: null, value: 'true'},
130+
{name: 'boo', old: 'true', value: 'false'},
131+
{name: 'int', old: null, value: '42'},
124132
]);
125133
expect($el.getAttribute('foo')).to.equal('bar');
126134
});

0 commit comments

Comments
 (0)