クイックスタート

インストール

npm install plain-elements

build step のない環境(CMS や静的サイト)向けには、jsDelivr から IIFE バンドルを読み込めます:

<script defer src="https://cdn.jsdelivr.net/npm/plain-elements@latest/dist/plain-elements.iife.js"></script>

コンポーネントの登録

パッケージをインポートすると、すべてのカスタム要素が登録されます。

import "plain-elements";

必要なものだけ読み込むこともできます:

import "plain-elements/dialog";
import "plain-elements/popover";
import "plain-elements/tabs";
import "plain-elements/accordion";
import "plain-elements/collapsible";
import "plain-elements/tooltip";

最初の例

plain-elements/dialog を読み込むと <pe-dialog> が custom element として登録され、あとは HTML に必要な要素と data-* 属性を書くだけでダイアログが動作します。

npm でインストールした場合(ESM):

import "plain-elements/dialog";

script タグで読み込む場合(IIFE、build step のない環境向け):

<script defer src="https://cdn.jsdelivr.net/npm/plain-elements@latest/dist/plain-elements.iife.js"></script>

どちらの方法でも、読み込んだ時点でカスタム要素が登録されるので、HTML 側の書き方は変わりません。

<pe-dialog>
  <button type="button" data-dialog-trigger>Open dialog</button>

  <dialog>
    <h2 data-dialog-title>Example dialog</h2>
    <p data-dialog-description>
      A native modal dialog enhanced with trigger wiring and ARIA sync.
    </p>
    <button type="button" data-dialog-close>Close</button>
  </dialog>
</pe-dialog>

トリガーをクリックするとダイアログが showModal() で開き、フォーカスがダイアログ内に移ります。閉じるボタンまたは Escape キーでダイアログを閉じると、フォーカスは元のトリガーに戻ります。他のコンポーネントの例は、それぞれのコンポーネントリファレンスを参照してください。

推奨 CSS

各ホスト要素に display: contents を指定すると、カスタム要素自体がレイアウト用のボックスを作らなくなります。

pe-dialog,
pe-popover,
pe-tabs,
pe-accordion,
pe-collapsible,
pe-tooltip {
  display: contents;
}

ネイティブ要素と公開されている data-* 属性を直接スタイリングします。詳しくはスタイリングを参照してください。

次のステップ

• プリミティブの選び方
• コンポーネントリファレンス
• ブラウザサポート