$el: The Current Lane
$el refers to the current DOM element the directive is on. It's like pointing to the specific swimming lane you are currently in. You can directly change this lane without affecting others.
<!-- HTML -->
<div class="lane" @click="selectLane($el)">
Lane 1
</div>
// Alpine.data method
selectLane(laneElement) {
// Reset others first
this.reset();
laneElement.classList.add('bg-cyan-400', 'text-white');
...
}Click a Lane to Select It
$refs: Named Facilities
$refs lets you access specific DOM elements by name from anywhere within your component. It's like a control panel for the pool complex, allowing you to open the 'Snack Bar' or check the 'Diving Board' by name, no matter where the button is.
<!-- HTML -->
<div x-ref="snackBar">Snack Bar</div>
<button @click="toggleFacility('snackBar')">
Toggle Snack Bar
</button>
// Alpine.data method
toggleFacility(refName) {
const facilityEl = this.$refs[refName];
facilityEl.classList.toggle('border-green-500');
...
}Control Panel
$root: The Entire Complex
$root refers to the root element of the entire Alpine component. It's the "emergency button" that affects the whole swimming complex. A button deep inside can trigger an alarm that puts the entire complex (the root `div`) on high alert.
<!-- The component's root element -->
<div x-data="rootDemo">
<!-- A deeply nested button -->
<button @click="soundAlarm($root)">Sound Alarm</button>
</div>
// Alpine.data method
soundAlarm(rootElement) {
rootElement.classList.add('ring-red-500');
this.alarmActive = true;
...
}Complex Status:
Locker Room
Showers
Action Log
Shows the most recent actions you've performed.