Using an Airport Terminal Analogy
$el refers to the current DOM element. An action at a gate affects only that gate itself. It's like pressing a button on the gate's control panel.
Gate A1 - Status:
Gate B4 - Status:
<!-- The button uses $el to find its parent container -->
<div class="gate-container">
<button @click="activateGate($el, 'Boarding')">
Activate Light
</button>
</div>
<script>
function activateGate(buttonEl, message) {
// $el is the button itself
let gate = buttonEl.closest('.gate-container');
gate.style.backgroundColor = '#dbeafe'; // Blue-100
// ...
}
</script>$refs lets you access other specifically named elements within your component. It's like an airport-wide PA system that can target a specific location, like "Baggage Claim" or "Security".
<!-- The button targets the named element -->
<button @click="$refs.baggageClaim.textContent = 'New Info!'">
Update Baggage Claim
</button>
<!-- The element to be targeted -->
<p x-ref="baggageClaim"></p>$root refers to the top-level element of your Alpine component (the one with x-data). It's for actions affecting the entire system, like a terminal-wide lockdown or changing the lighting.
Any button inside this component can change the appearance of the entire white container (the "Terminal") that wraps all three of these demos.
<!-- The component's root element -->
<div x-data="{...}">
<!-- A button deep inside the component -->
<button @click="$root.classList.toggle('lockdown-active')">
Toggle Lockdown
</button>
</div>