Shadow parts

概要

::part() CSS擬似要素と part 属性により、Shadow DOM の外部から内部要素のスタイルをカスタマイズできます。

対応ブラウザ

基本構文

<!-- コンポーネント内部 -->
<template shadowrootmode="open">
  <button part="btn">クリック</button>
</template>

<style>
  my-el::part(btn) { background: blue; color: #fff; }
</style>

実務での使いどころ

• Shadow parts の活用

  Shadow DOMパーツ。外部からShadow DOM内のスタイルを制御するAPI。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Shadow parts