`consistent-selector-style`: ID selector problematic

[marekdedic]

Hi,
when coding consistent-selector-style, I made a mistake (in fact, multiple, but I already opened another issues :D). The ID selector in Svelte is quite problematic, it turns out. While scoped styles ensure that any styles applied to ID-selected elements remains scoped, the ID itself is not rewritten, meaning that if a Svelte component contains a HTML element with an ID and is included in the page more than once, the page HTML is actually invalid (because having two elements with the same ID in the same HTML document is forbidden). While browsers generally don't care, I don't think eslint-plugin-svelte should promote this.

Here is where consistent-selector-style comes in - it actually promotes ID selectors over class selectors in the default configuration. And because there is realistically no way to know if a component is used twice (or the same ID used in a different component), this is incorrect and probably unfixable.

What to do with this? My proposal would be to change the default value of the style config from ["type", "id", "class"] to ["type", "class"], which actually promotes class selectors over ID selectors. Additionally, I'd add a note to the docs. @ota-meshi @baseballyama what do you think? Is this OK to change in a minor version? I can also remove the ID option altogether for a more thorough solution.... Thanks!

[ota-meshi]

Could you please provide example code of the problem to clarify?

If I understand what you're saying, how about changing the rule to only suggest an ID selector if the element has an ID?

[marekdedic]

Consider this playground: https://svelte.dev/playground/c210fa6d042c42cd8d1b3f68ad113764?version=5.23.2

There are now 2 elements with the same ID (container) - that is not valid HTML.

[marekdedic]

See sveltejs/svelte#6932

[ota-meshi]

Thank you for providing the example code. I understand that it's not valid HTML.
So the problem is that the rule suggests adding an id attribute, right?

how about changing the rule to only suggest an ID selector if the element has an ID?

Doesn't this solve the problem?

[marekdedic]

how about changing the rule to only suggest an ID selector if the element has an ID?

Doesn't this solve the problem?

That would work, but I am afraid it would make the rule confusing for users - it wouldn't suggest using an ID selector, but when you add the ID, it would...

My preferred solution would be to change the default (from ["type", "id", "class"] to ["type", "class"]) and add a warning to the docs.