# RFC idea: template scoped unique IDs

**URL:** <https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211>\
**Category:** Proposals\
**Created:** [October 27, 2021, 6:18pm UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211 "2021-10-27T18:18:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sukima](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sukima/32/5773_2.png) [@sukima](https://discuss.emberjs.com/u/sukima)\
**Post date:** [October 27, 2021, 6:18pm UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211/1 "2021-10-27T18:18:55Z")

</div>

In my forms I often want to reference elements by ID (per the spec). To do so in a component however comes with the caveat that HTML IDs are global and to make then unique for each instance of a component we have to do some contortions to support this.

There are many ways to solve this problem so I will focus on the one solution I use all the time—

```nohighlight
{{#let (guid-for this "name") as |id|}}
  <label for={{id}}>Name</label>
  <input id={{id}}>
{{/let}}

```

This example creates a unique ID that can be shared for the `<label>` and the `<input>`. Another example—

```nohighlight
{{#let (guid-for this "form") as |formId|}}
  <ModalDialog as |modal|>
    <modal.Header>…</modalHeader>

    <modal.Content>
      <form id={{formId}}>
        …
      </form>
    </modal.Content>

    <modal.Footer>
      <button type="submit" form={{formId}}>
        Save and Close
      </button>
    </modal.Footer>
  </ModalDialog>
{{/let}}

```

With both these cases it means we have to wrap things with a `#let` and create our own `guid-for` helper.—

```nohighlight
{{#let (guid-for this "first-name") as |id|}}
  <label for={{id}}>First Name</label>
  <input id={{id}}>
{{/let}}
{{#let (guid-for this "last-name") as |id|}}
  <label for={{id}}>Last Name</label>
  <input id={{id}}>
{{/let}}

```

All this leads me to want a cleaner and fresher way to perform this common task. I’d like to propose an idea and see if other feel this is worth bringing to the core team as an RFC.

```nohighlight
<label for={{@@name}}>Name</label>
<input id={{@@name}}>

```

Or perhaps a new sigil—

```nohighlight
<label for={{^name}}>Name</label>
<input id={{^name}}>

```

And what this would do is internally convert the value into a unique ID that remains the same for the scope of that component’s template.

```nohighlight
Component A
  @@foo => 'uniqueID-A-foo'
  @@foo => 'uniqueID-A-foo'
  @@bar => 'uniqueID-A-bar'
Component B
  @@foo => 'uniqueID-B-foo'
  @@foo => 'uniqueID-B-foo'
  @@bar => 'uniqueID-B-bar'

```

Thoughts?

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [October 27, 2021, 7:59pm UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211/2 "2021-10-27T19:59:18Z")

</div>

Have you seen this RFC (on exactly this subject)?

> <https://github.com/emberjs/rfcs/blob/master/text/0659-unique-id-helper.md>

---

<div class="post-metadata">

**Author:** ![sukima](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sukima/32/5773_2.png) [@sukima](https://discuss.emberjs.com/u/sukima)\
**Post date:** [October 27, 2021, 8:02pm UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211/3 "2021-10-27T20:02:01Z")

</div>

I think my idea expands on that semantics a bit more then just a helper.

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [October 27, 2021, 8:15pm UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211/4 "2021-10-27T20:15:42Z")

</div>

> In the first case of the label/input we also have to make the `as |id1|` unique because eslint complains if we attempt to use multiple `#let` —

This seems just like a bug to me, reusing that `id` block param should be totally fine! Also, I assume you mean ember-template-lint (not eslint)? If so would you mind filing an issue?

---

<div class="post-metadata">

**Author:** ![sukima](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sukima/32/5773_2.png) [@sukima](https://discuss.emberjs.com/u/sukima)\
**Post date:** [October 29, 2021, 1:48am UTC](https://discuss.emberjs.com/t/rfc-idea-template-scoped-unique-ids/19211/5 "2021-10-29T01:48:55Z")

</div>

> [@rwjblue](#):
>
> This seems just like a bug to me, reusing that `id` block param should be totally fine! Also, I assume you mean ember-template-lint (not eslint)? If so would you mind filing an issue?

Unable to reproduce. Must have been an old bug. Edited original post.