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

Open jessevanassen opened this issue 2 years ago • 1 comments

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/[email protected]/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

[x] Chrome
[x] Firefox
[x] Edge
[ ] Safari
[ ] IE 11

(only browsers I could test)

Aug 22 '23 14:08 jessevanassen

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Apr 26 '25 22:04 stale[bot]