$root Magic Property

Access the root element of the current component.

What is $root?

$root returns the root DOM element of the current Alpine component – the element that carries the x-data attribute.

When to Use

Useful when you have deeply nested elements and you need to refer back to the component's root, for example to dispatch an event from the root, or to check a data property on the root from an inner element.

Example

Code

<div x-data>
  <div class="nested">
    <button @click="console.log($root)">Log my root element</button>
  </div>
</div>

💡 Tip

Most of the time you won't need $root because data and methods are accessible anywhere inside the component. It's mainly for edge cases where you need the actual DOM node.

Helpful? Share this page!↑ Back to top