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/scoped-custom-element-registry@0.0.9/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.
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), theattributeChangedCallbackwon'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
When the component initializes, the attributeChangedCallback should fire and the added attributes should be logged to the console. When the polyfill is present, the
attributeChangedCallbackwon't fire when the component is initialized. When the polyfill is disabled, theattributeChangedCallbackfires as expected.Expected behavior
I expect the
attributeChangedCallbackto fire for every attribute when the component is initialized.Actual behavior
The
attributeChangedCallbackisn't executed.Version
0.0.9
Browsers affected
(only browsers I could test)