Understanding $el, $refs, and $root
The park is currently closed for the night.
$el refers to the current DOM element. Think of it as the specific trail segment you are standing on. Any action using $el affects only that element.
// Click a trail to highlight it
@click="highlightTrail($el.parentElement)"
$refs lets you access any element with an x-ref attribute by its name. It's like a map with named landmarks you can navigate to from anywhere in the park.
📍 Ranger Station
Status: All clear.
🏞️ Waterfall Lookout
Status: Open.
// In component logic:
this.$refs.rangerStation.classList.add(...)this.$refs.rangerStatus.innerText = ...
$root refers to the root element of the Alpine component. It's like a park-wide announcement system that affects the entire area defined by x-data.
Deep inside a remote hiking trail...
The park is currently
.
// From a nested button:
this.$root.classList.add('park-closed')