$el Magic Property

Reference to the current DOM element (the root element of the component).

What is $el?

$el is a magic property that always refers to the current DOM element – the root element of your Alpine component (the one with x-data). It gives you direct access to the underlying DOM node, just like this.$el in Vue.

When to Use

Use $el whenever you need to interact with the component's root element itself – for example, to get its dimensions, add/remove CSS classes imperatively, or pass the element to a third‑party library that expects a DOM node.

Basic Example

<div x-data @click="console.log($el.tagName)">
  Click me – logs "DIV"
</div>

Advanced Usage

You can use $el inside any Alpine expression. For instance, to toggle a class on the root element itself:

<div x-data="{ active: false }" :class="active && 'bg-blue-100'" @click="active = !active">
  Toggle my background
</div>