Home About App

Astro 内で Web components を使用する方法

投稿日: 2023-01-08



astro ファイル内に書く場合は、 <script> タグ内にカスタム要素を実装して使うだけ(↓ は公式サイトからの引用)。


<!-- Wrap the component elements in our custom element “astro-heart”. -->
<!-- prettier-ignore -->
  <button aria-label="Heart">💜</button> × <span>0</span>

  // Define the behaviour for our new type of HTML element.
  class AstroHeart extends HTMLElement {
    constructor() {
      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', () => {
        countSpan.textContent = count;

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

外部ファイルに切り出す場合は、 <script> タグの src 属性に指定するか、

<script src="../components/aboutme.js"></script>


import で読み込むだけ。

  import '../components/aboutme.js';


そうすると、ページの head 要素に type="module" で挿入されてカスタム要素が使えるようになる。

昔は resolve API とかを使う必要があったらしいけど: https://navillus.dev/blog/web-components-in-astro

resolve API が廃止されて今の形になったらしい: https://docs.astro.build/en/migrate/#deprecated-astroresolve

実装サンプル: https://github.com/t0yohei/blog-no-name/pull/1/files