x-ref combined with html id="..."

[lucaceriani]

It has occurred to me more than once to write something like:

<div id="anotherdiv" x-ref="anotherdiv">
    ...
</div>

So I would like to propose the following syntax

<div id="anotherdiv" x-ref>
    ...
</div>

where x-ref automatically gets the name from the id attribute.

[danddanddand]

It's a bad idea because id is unique to the page and x-ref is unique to the component. Since components are often sprinkled all over the page using the syntax you're suggesting would create all kinds of duplicate id errors.

[lucaceriani]

If ids are unique to the page, they are also unique to the component or am I missing something?

[danddanddand]

I'm using component to mean something existing in it's own x-data scope. So consider a button component that us reused multiple times, that button component could have a span that has an x-ref that is scoped to the x-data. Using id isn't scoped to component (in fact it just has nothing to do with alpine) so it's scoped to page if you want to think of it like that. So the syntax you're suggesting is bad idea because x-ref has advantage of only having to be unique within component so if you find yourself doing id="anotherdiv" x-ref="anotherdiv" it's probably bad habit you should stop and instead consider do I want to make this element unique to component and referenced only in component (use x-ref) or can I guarantee it's unique element to page (won't be duplicated) and I need to reference it directly (use id).