webcomponents / polyfills

Web Components Polyfills
BSD 3-Clause "New" or "Revised" License
1.13k stars 165 forks source link

[scoped-custom-element-registry] Attr nodes do not trigger the attributeChangedCallback #560

Open jessevanassen opened 10 months ago

jessevanassen commented 10 months ago

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

<!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>
    </head>
    <body>
        <script>
            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);
        </script>
    </body>
</html>

I have also created a number of tests demonstrating this behavior in this patch file: 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

(only browsers I could test)