astro中创建web components

先创建AstroHeart.astro:

<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 "../../components/AstroHeart.astro";

<astro-heart client:visible>
    <button aria-label="Heart">

标签：count,web,components,AstroHeart,astro,querySelector,Starlight	

From： https://www.cnblogs.com/soarowl/p/18347857