Alpine.js component

Encapsulate nested content by binding x-html

by ps200306

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js"></script>

</head>

<body>

    <div x-data="dropdown" x-bind="bind"></div>

</body>

<script type="text/javascript">

    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            show: false,

            bind: {
                ['x-html']() { return `
                    <button @click="show = !show">Click me!</button>
                    <div x-show="show">Hello World</div>
                `},
            },
        }));
    })

</script>

</html>