Are x-ref / $refs scoping rules documented anywhere?

[anentropic]

The docs show an example like:

<button @click="$refs.text.remove()">Remove Text</button>
 
<span x-ref="text">Hello 👋</span>

I have already found the discussion on old bugs pointing out that this isn't sufficient and there has to be a parent element with an x-data attribute to make them part of a component

But in my case this still doesn't seem to work

I have (simplified src):

<div x-data="{}" class="mdc-menu-surface--anchor" id="demo-menu">
    <button x-data="MDCRipple()" @click="$refs.mymenu1.open=true">Click me</button>
    <div x-data="MDCMenu()" x-ref="mymenu1"></div>
</div>

But I get Cannot set properties of undefined (setting 'open') when I click the button

If I console.log($refs) in the click handler I can see I have the expected Proxy object, but it doesn't seem to know about my x-ref

While typing out this message I thought of something it might be...

getting rid of the x-data="MDCMenu()" avoids the issue (and console.log($refs.mymenu1) logs the expected element)

so it seems to be because the refs are scoped to a component and in case of nested components the child component refs do not become part of the parent component refs scope

I can see how that probably makes sense, would be great if all this was explained in the docs though

• https://alpinejs.dev/directives/ref
• https://alpinejs.dev/magics/refs

[anentropic]

Is the full syntax documented anywhere?

I can see that e.g. @click is shorthand for x-on:click

elsewhere I've seen this:

<li :id="$id('list-item', item.id)">...</li>

but I can't find what is the significance of colon prefix on :id="..."

[anentropic]

ok, well it's this https://alpinejs.dev/directives/bind#shorthand-syntax

it'd be great to have a "syntax" page in the docs that lists all these forms and links to the relevant places

[SimoTod]

It's the same as properties. A child component cannot see the property of a different child component, same for refs.

Doing differently would require the child to somehow inject the reference into the parent, potentially overriding a reference to the parent itself or a different object.

[ekwoka]

yeah, refs are added to the nearest component root.

Otherwise multiple of the same component in a loop would fight over things.