Alpine.js in the Recording Studio

1. $el: The Current Track

Refers to the element the directive is on. It's like a channel strip button that only affects its own track.

<button @click="soloTrack($el)">Solo</button>

2. $refs: Named Equipment

Access other elements by name within the component. It's like a mixing console controlling specific, labeled gear.

<div x-ref="compressor">...</div>
<button @click="$refs.compressor.toggle()">...</button>

3. $root: The Entire Studio

Refers to the root element of the Alpine component. It's the master switch that affects the whole studio at once.

Note: The effect is applied to the main component container, indicated by the border.

<div x-data>
  <button @click="$root.classList.add('...')">
</div>