Alpine.js Theater: $el, $refs, and $root

Act 1: The Actor ($el)

Analogy: An actor referring to themselves. `$el` gives an element direct access to its own DOM node.

<button @click="$el.classList.toggle('spotlight')">...</button>

Act 2: The Director & Props ($refs)

Analogy: A director calling for a specific, named prop on stage. `$refs` accesses other elements within the component by their `x-ref` name.

<div x-ref="sword">...</div>
<button @click="$refs.sword.classList.add('prop-active')">...</button>

Act 3: The Entire Production ($root)

Analogy: The director controlling the entire production (e.g., stage lighting, curtains). `$root` refers to the root element of the Alpine component.

Notice how these buttons change the entire white container.

<div x-data="..." :class="{ 'some-class': state }">
    <button @click="$root.classList.add('some-class')">...</button>
</div>