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

[BerndWessels]

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

[hgiesel]

That works, BUT since it is not allowed that multiple elements have the same id attribute

Multiple elements in the same document cannot have the same ID, but if they're in different documents (such as a shadow DOM), they are typically allowed to have the same ID.

The spec seems to be vague on this topic, but it is common practice:

1. shadow root has a getElementById method that fetches the id within the shadow root.
2. If you have a look at Google UIs (e.g. Chromes chrome://settings page) you can see it all over the place.

[BerndWessels]

@hgiesel that is true, but since it would be a really minor change to achieve full compliance and make all the dev and dom analysis tools happy, I believe this is definitely worth it.

[hgiesel]

Which DOM analysis tools are you using?

[ivanhofer]

@BerndWessels I think the behavior of Svelte is correct since it is not inserting the same id twice inzo a document. The analysis tools should add a fix to allow the same id in different shadow doms.

Svelte needs a quick way to check if styles are already added to the dom. This is done with getElementById. By changing it to data-id it will take longer to check if these styles already exist because it would need to use querySelector

[BerndWessels]

@ivanhofer thanks for the response.

So there is another way to solve this reasonably elegant.

If the user of a svelte component provides an id (or alternatively a prefix) the style element incorporates it.

For example on creation of the svelte component the user provides a prefix like firstname-input then the resulting style id would be <style id="firstname-input-svelte-mtnic9"> .

This enables the user to still keep all ids on a page unique and especially accessibility tools wouldn't freak out and declare the page as non compliant. (which is a big deal in US law and an important reason enterprises need this https://www.ada.gov/)

That is simple and elegant and can be a totally optional parameter when creating a svelte element, so a none breaking change.

Any thoughts?

[ivanhofer]

This adds unecessary complexity. It solves a problem that is caused by a falsy behavior of other tools. I think you should report the issue to the developers of those tools.

This is my opinion. But probably someone of the svelte core team members should decide if they want this.

[BerndWessels]

@ivanhofer in a perfect world you would be right - but unfortunately even the major browsers like chrome, edge and firefox do not follow the standard and spit out warnings like this:

This might turn out as too much risk for our legal team. Especially big organizations operating in the US are getting sued for millions for breaches of the ADA act all the time. And any warning especially coming from the browsers own dev tools are serious red flags.

But technically you are right. Unfortunately the web standards are pretty wonky.

Cheers

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

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