Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
3 of 5 tasks
jessevanassen opened this issue Aug 22, 2023 · 0 comments
Open
3 of 5 tasks

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

jessevanassen opened this issue Aug 22, 2023 · 0 comments
Labels
Focus Area: Standards & Polyfills Type: Bug

Comments

@jessevanassen
Copy link

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

  • Chrome
  • Firefox
  • Edge
  • Safari
  • IE 11

(only browsers I could test)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Focus Area: Standards & Polyfills Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jessevanassen