Analogy: The Gym Facility
$el refers to the current DOM element. It's like a piece of gym equipment that can change its own settings locally.
Status:
Intensity:
<button @click="changeEquipment($el, 'start')">
...
</button>
$refs lets you access other elements by a name you give them with x-ref. It's like a central panel that controls specific, named areas in the gym.
<button @click="toggleAreaLight('cardioZone')">...</button>
<div x-ref="cardioZone">...</div>
$root refers to the root element of the Alpine component. It's the master switch that affects the entire facility, like closing for the night.
The entire page is inside the component's $root.
<div x-data="gymFacility" :class="{ 'dark': !isOpen }">
<!-- $root is this div -->
<button @click="togglePower()">...</button>
</div>