custom-elements-everywhere icon indicating copy to clipboard operation
custom-elements-everywhere copied to clipboard

Add a test that attributes added in custom elements aren't removed by the framework

Open tbroyer opened this issue 2 years ago • 0 comments

It's been brought to my attention that Svelte removes attributes on elements when it "claims" them, so a custom element that adds itself some attributes will have them removed by Svelte at some point. This would be the case for example for ARIA attributes or custom attributes added to emulate custom states for styling, pending global support for ElementInternals and CustomStateSet (e.g. using https://github.com/calebdwilliams/element-internals-polyfill).

To reproduce, paste the following code in the Svelte REPL at https://svelte.dev/repl, then inspect the rendered DOM:

<script>
	let name = 'world';
	
	class FooBarElement extends HTMLElement {
		constructor() {
			super();
		}
		connectedCallback() {
			this.ariaLabel = "foo";
                        this.setAttribute("state--foo", "bar");
		}
	}
	customElements.define("foo-bar", FooBarElement)
</script>

<h1>Hello {name}!</h1>
<foo-bar></foo-bar>

tbroyer avatar Jan 26 '23 13:01 tbroyer