Is it possible to use the same component twice without repeating the html?

[pomber]

The docs mention you can extract data and behavior into reusable functions, but can you reuse the HTML too?

For example, if I want to use a dropdown twice in different places in the same page, do I need to repeat the HTML like this:

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

    <div x-show="isOpen()" x-on:click.away="close">
        Content for my first dropdown
    </div>
</div>

<div> Random stuff... </div>

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

    <div x-show="isOpen()" x-on:click.away="close">
        Content for my second dropdown
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

[ryangjchandler]

This is something that you should handle with a server side templating engine, or even a front end one.

[lovedder1995]

Yes, is it possible.

<template x-component="dropdown">
    <div x-data="{ ...dropdown(), ...$el.parentElement.data()}">
        <button x-on:click="open">Open</button>

        <div x-show="isOpen()" x-on:click.away="close" x-text="content"></div>
    </div>
</template>

<x-dropdown content="Content for my first dropdown"></x-dropdown>

<div> Random stuff... </div>

<x-dropdown content="Content for my second dropdown"></x-dropdown>

<x-dropdown></x-dropdown>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
            content: 'Default content'
        }
    }

    document.querySelectorAll('[x-component]').forEach(component => {
        const componentName = `x-${component.getAttribute('x-component')}`
        class Component extends HTMLElement {
            connectedCallback() {
                this.append(component.content.cloneNode(true))
            }
 
            data() {
                const attributes = this.getAttributeNames()
                const data = {}
                attributes.forEach(attribute => {
                    data[attribute] = this.getAttribute(attribute)
                })
                return data
            }
        }
        customElements.define(componentName, Component)
    })
</script>

[lonix1]

"Alpine JS Component" https://github.com/markmead/alpinejs-component#example
also: https://stackoverflow.com/q/65710987/9971404

[vseryakov]

or Alpinejs-app for SPA use case: https://vseryakov.github.io/alpinejs-app/