webcomponents
[scoped-custom-element-registry] attributeChangedCallback doesn't fire for custom elements present in the HTML body when parsing the page
Description
When registering the polyfill and a custom element in the head, and the custom element is present in the body when initializing the page (either by putting it directly in the page's HTML, or by using document.write), the attributeChangedCallback won't fire for the element's attributes.
This is especially problematic, because it breaks functionality of all web components, not just web components that use the scoped registry. Including the polyfill broke unrelated functionality in our application.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/@webcomponents/[email protected]/src/scoped-custom-element-registry.js"></script>
<script>
customElements.define('my-element', class MyElement extends HTMLElement {
static get observedAttributes() {
return ['param'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('attributeChangedCallback', { name, oldValue, newValue });
}
});
</script>
</head>
<body>
<!-- This should trigger the attributeChangedCallback, which logs to the console -->
<my-element param="value"></my-element>
</body>
</html>
When the component initializes, the attributeChangedCallback should fire and the added attributes should be logged to the console.
When the polyfill is present, the attributeChangedCallback won't fire when the component is initialized.
When the polyfill is disabled, the attributeChangedCallback fires as expected.
Expected behavior
I expect the attributeChangedCallback to fire for every attribute when the component is initialized.
Actual behavior
The attributeChangedCallback isn't executed.
Version
0.0.9
Browsers affected
- [x] Chrome
- [x] Firefox
- [x] Edge
- [ ] Safari
- [ ] IE 11
(only browsers I could test)
