Alpine.js in the Studio

Understanding $el, $refs, and $root through a photography analogy.

Studio Action Log

No actions yet. Interact with a demo below.

$el: The Current Shot

$el refers to the current DOM element. It's like focusing on a single photo print and applying an effect directly to it, without affecting any other prints on the table.

Photo Editing Table

Example Syntax:

<div @click="$el.classList.add('border-blue-500')">...</div>

$refs: Named Lighting

$refs lets you access specific, named elements from anywhere within your component. It's like a lighting control panel where you can turn on the "key light" or "fill light" by name.

Studio Scene

K
F
R

Lighting Controls

Example Syntax:

<div x-ref="keyLight"></div>
<button @click="$refs.keyLight.classList.toggle('active')">...</button>

$root: The Entire Setup

$root refers to the root element of the entire Alpine component. Think of it as the master control for the whole studio, capable of changing the backdrop for the entire scene or cutting the power.

Component Boundary

Setup Controls

Example Syntax:

<div x-data>
  <!-- elements -->
  <button @click="$root.classList.toggle('dark-mode')">...</button>
</div>