astro中创建components

先创建AstroHeart.astro:

<astro-heart>
    <button aria-label="Heart">💜</button> × <span>0</span>
</astro-heart>

<script>
    // Define the behaviour for our new type of HTML element.
    class AstroHeart extends HTMLElement {
        constructor() {
            super();
            let count = 0;

            const heartButton = this.querySelector('button')!;
            const countSpan = this.querySelector('span')!;

            // Each time the button is clicked, update the count.
            heartButton.addEventListener('click', () => {
                count++;
                countSpan.textContent = count.toString();
            });
        }
    }

    // Tell the browser to use our AstroHeart class for <astro-heart> elements.
    customElements.define('astro-heart', AstroHeart);
</script>

test.mdx:

---
title: Welcome to Starlight
description: Get started building your docs site with Starlight.
template: splash
---

# Welcome

import AstroHeart from "../../components/AstroHeart.astro";

<AstroHeart />
<AstroHeart />