Allow scoped IDs equivalent to scoped classnames

[thinkle]

Describe the problem

Like class names, IDs are global in vanilla HTML, which is fundamentally at odds with a component-based way of writing code. Compliant HTML code with labels, for example, is supposed to use matching ids on the for= attribute of the label and the id= attribute of the input.

Ideally, one could write a labelled input component like this in svelte:

<div>
<label for="text-input"><slot/></label>
<input id="text-input">
</div>

Unfortunately, if you use more than one instance of this component, it will break, so svelte-users have to roll-their-own ID generating solution to insure IDs do not conflict.

Currently, I believe the recommended solution is something like this:

<script context="module">
   let counter = 0
</script>
<script>
  counter += 1;
  let id = 'text-input-'+counter
</script>
<div>
  <label for={id}><slot/></label>
  <input id={id}>
</div>

That's a lot of boilerplate just to create a label and an input, and it's still fragile code since there remains the potential for id-collision with other components. What's more, it requires using a module-level script, which is a somewhat advanced feature of svelte, to accomplish a simple task required in just about any forms-based app.

Describe the proposed solution

Ideally, id= and for= attributes would work in a scoped way out of the box, just as classes do.

<div>
  <label for="text-input"><slot/></label>
  <input id="text-input">
</div>

Would generate code with hashed prefixes added to id= and for= attributes automatically.

<!-- output -->
<div>
  <label for="svelte-e9wl34-text-input"><slot/></label>
  <input id="svelte-e9wl34-text-input">
</div>

That would then require syntax to allow global values to be used when wanted, like so:

<div>
  <label for|global="text-input"><slot/></label>
  <input id|global="text-input">
</div>

Generates code without hashed prefixes added.

<!-- output -->
<div>
  <label for="text-input"><slot/></label>
  <input id="text-input">
</div>

Alternatives considered

Require special syntax to use scoped IDs

The above solution would be a breaking change. To avoid a breaking change, we could instead introduce a syntax for specifying local IDs. This would leave all existing code alone, but would mean that working with ids and classes would feel different.

<div>
  <label for|local="text-input"><slot/></label>
  <input id|local="text-input">
</div>

Provide some utility functions for generating IDs on the fly securely

<script>
   import {generateId} from 'svelte/future-magic';
</script>
<div>
  <label for={generateId("text-input")}><slot/></label>
  <input id={generateId("text-input")}>
</div>

This one is easy to do project-by-project if need be, so it would just be a convenience to add it to svelte. It doesn't feel nearly as elegant as building it into the syntax. That said, it would still be nice to standardize a way to do this and to implement it in a way that would prevent collisions between component libraries in the future.

Importance

nice to have

[gtm-nayan]

Unlike class hashes which are "unique" for each component, IDs would have to be unique for each instance of a component as well. The hash added to class names is evaluated at compile time, whereas IDs would need additional runtime code to do this.

Classes on an element can be added without affecting existing classes, but since an element can't have multiple IDs, appending the hash would change the existing ID, which breaks any other user code that might rely on the ID.

IDs aren't solely used to link labels with input elements, (which btw can be achieved by putting the form input inside the label element). I think they're more commonly used to link to a section of a document instead, so the hash would have to be the same for every visitor to the webpage. Because of this, there would also need to be a way for the component instance to expose what it's hash is.

While your suggestion to have extra syntax does prevent some of these problems it also comes with its own. Therefore, it is probably best to leave it up to the user. It's clearer and more predictable for the user that way. And it's not that much boilerplate since most components already have a script tag.

[thinkle]

Ah -- makes sense. I hadn't thought about the compile-time vs. run-time difference in computing the hash. In that case, I'm thinking the ideal solution would look like the below, which might make the proposal for an API to access the css hash worthy of consideration.

<script context="module">
   import {getHash} from 'svelte/future';
   let counter = 0
   const hash = getHash()
</script>
<script>
  counter += 1;
  function genId (name) {
     return `${name}-${hash}-${counter}`
  }
</script>
<div>
  <label for={getId('text-input')}><slot/></label>
  <input id={getId('text-input')}>
</div>

Is there a better way to generate IDs in e.g. a component library and prevent collision with other code?

[mdynnl]

Using svelte-generated-class for id wouldn't work for multiple uses, would have the same id.

Even (Math.random() * 10e15).toString(16) should be pretty good enough to avoid collision or use lukeed/uuid or any other light-weight uuid generator.

Not related with this issue, but a good use case for
#6044 is component-aware-css. But this needs custom css syntax which has very little chance for approval/implementation.

[fudom]

It seems that React has this built-in: https://react.dev/reference/react/useId
But I would prefer to configure my component to use scoped IDs.

[Conduitry]

Closing, as Svelte 5.20 now has #7517 - https://svelte.dev/docs/svelte/$props#$props.id()