id attribute on style rendered into shadow dom should be replaced with data-id

Describe the problem

When we build a svelte component as stand-alone custom element, its style is rendered into the shadow root of the custom element like <style id="svelte-mtnic9">.

Now lets say the compiled and minified stand-alone svelte custom element is called <my-super-input> and we import it into a vanilla or react project.

The problem is, that we want to use <my-super-input> in a vanilla or react website multiple times in different places.

That works, BUT since it is not allowed that multiple elements have the same id attribute, the dev tools will complain about all the <style id="svelte-mtnic9"> in each instance of <my-super-input>.

This can potentially break unit tests, customer acceptance and is generally against the rule that id attributes must be unique.

This originated from a discussion I had here with @ivanhofer

Describe the proposed solution

The solution is fortunately super easy. Instead of using the id attribute, please use the data-id attribute when rendering the style element into the shadow root of the custom element.

Alternatives considered

Alternatively you can use basically any attribute other than id. But data-id seems the tidiest.

Importance

i cannot use svelte without it

[Conduitry]

I’m going to close this. There are good reasons to use id, as mentioned above. The compiler shouldn’t produce worse code in order to try to appease overzealous validation checks in other tools.

[ivanhofer]

@BerndWessels just because everyone does it like this, does not mean that it is correct 😉 You probably should create an issue in Chrome and other Browsers (or for the tool they use to check a11y). Maybe they don’t know about the issue and are wiling to fix it…