Is it possible to access x-bind directive DOM element from component?

[arthurshlain]

Hi. The question is how to access DOM element without using any additonal querySelector when x-bind directive was used.

For example:

<div x-data="dropdown()">
    <button x-bind="trigger">Open Dropdown</button>
 
    <span x-bind="dialogue">Dropdown Contents</span>
</div>

document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,
            ... 
            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ...
            },
 
            getDialogueHeight(){

               // need something like that
               //return this.dialogue.$el.clientHeight() 
                  
               // instead of weird:
               retrn this.$root.querySelector('[x-bind="dialogue"]').clientHeight;
            }
        }))
    })

Or it's impossible because the one directive can be applied to many DOM elements?

[SimoTod]

In your bindings, add x-ref, then you can use this.$refs.dialog.getClientHeight().

See https://github.com/alpinejs/alpine/blob/main/packages/ui/src/combobox.js#L288 for an example