Back to Alpine

root

packages/docs/src/en/magics/root.md

3.15.12485 B
Original Source

$root

$root is a magic property that can be used to retrieve the root element of any Alpine component. In other words the closest element up the DOM tree that contains x-data.

alpine
<div x-data data-message="Hello World!">
    <button @click="alert($root.dataset.message)">Say Hi</button>
</div>
<!-- START_VERBATIM --> <div x-data data-message="Hello World!" class="demo"> <button @click="alert($root.dataset.message)">Say Hi</button> </div> <!-- END_VERBATIM -->