custom-elements-everywhere
custom-elements-everywhere copied to clipboard
Add a test that attributes added in custom elements aren't removed by the framework
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>