スタイリング

Plain Elements は見た目を決める CSS を含まず、Light DOM で動作します。このページでは、ホスト要素の扱い方、公開されている data-* 属性、状態セレクター、配置用のインラインスタイルなど、スタイリングの基本的な考え方をまとめます。

ホスト要素

ホストがレイアウトボックスを作る必要がなければ display: contents を指定します。

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

内部の要素をスタイリングする

ネイティブ要素と、各コンポーネントで公開している data-* 属性をセレクターに使います。

dialog {
  border: 0;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

[data-tabs-list] {
  display: flex;
  gap: 0.25rem;
}

[data-tabs-trigger][data-state="active"] {
  border-block-end: 2px solid currentColor;
}

公開フックは各コンポーネントページを参照してください。自動生成 ID や未公開のインラインスタイルには依存しないでください。

状態セレクター

標準セレクターを優先し、関連要素の状態を揃える場合は data-state を使います。

[data-collapsible-trigger][data-state="open"] .icon {
  rotate: 180deg;
}

[data-popover-content]:popover-open {
  display: grid;
  gap: 0.5rem;
}

:where(button, a, input):focus-visible {
  outline: 2px solid CanvasText;
  outline-offset: 3px;
}

配置

Popover と Tooltip は配置に必要なインライン値だけを設定します。見た目はすべてスタイルシートで指定してください。

ユーティリティ CSS とデザインシステム

ユーティリティクラスやデザインシステムのクラスを各要素へ直接指定できます。

<pe-dialog id="settings">
  <dialog class="surface radius-lg shadow-lg">
    <!-- ... -->
  </dialog>
</pe-dialog>