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] attributeChangedCallback doesn't fire for custom elements present in the HTML body when parsing the page #559

Open
3 of 5 tasks
jessevanassen opened this issue Aug 22, 2023 · 0 comments · May be fixed by #583
Open
3 of 5 tasks

[scoped-custom-element-registry] attributeChangedCallback doesn't fire for custom elements present in the HTML body when parsing the page #559

jessevanassen opened this issue Aug 22, 2023 · 0 comments · May be fixed by #583
Labels
Focus Area: Standards & Polyfills Type: Bug

Comments

@jessevanassen
Copy link

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/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.

Actual behavior

The attributeChangedCallback isn't executed.

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
1 participant
@jessevanassen