webcomponents / webcomponents/polyfills
[scoped-custom-element-registry] Attr nodes do not trigger the attributeChangedCallback
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
### Description
When the polyfill is active, creating and adding an `Attr` node to an element, changing an existing `Attr` node, or removing an `Attr` node from an element does not trigger the `attributeChangedCallback`.
When the polyfill is not active, these modifications do trigger the `attributeChangedCallback`.
This does not just influence custom elements using the scoped registry, but _all_ custom elements on the page. Therefore, loading the polyfill could break unrelated code.
### Example
```html
customElements.define('my-element', class MyElement extends HTMLElement {
static get observedAttributes() {
return ['param'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('attributeChangedCallback', { name, oldValue, newValue });
}
});
const element = document.createElement('my-element');
const attr = document.createAttribute('param');
attr.value = 'Initial value';
// This should log adding the attribute
element.setAttributeNode(attr);
// This should log changing the attribute
attr.value = 'New value';
// This should log changing the attribute
element.getAttributeNode('param').value = 'Another value';
for (const node of element.attributes) {
if (node.nodeName === 'param') {
// This should log changing the attribute
node.value = 'Value from for-loop';
}
}
// This should log removing the attribute
element.removeAttributeNode(attr);
```
I have also created a number of tests demonstrating this behavior in this patch file: [attributeNode-tests.txt](https://github.com/webcomponents/polyfills/files/12409433/attributeNode-tests.txt).
#### Expected behavior
Modifications to an Element's observed Attr nodes should trigger the attributeChangedCallback.
#### Actual behavior
Modifications to an Element's observed Attr nodes do not trigger the attributeChangedCallback.
### Version
0.0.9
### Browsers affected
- [x] Chrome
- [x] Firefox
- [x] Edge
- [ ] Safari
- [ ] IE 11
(only browsers I could test)
Contributor guide
Assessment
This issue has not been assessed yet.