HTML

この記事では、ボタンやウィジェットなどの部品をページの外側から分離し、CSSやJavaScriptの影響を受けにくくするShadow DOMの考え方を初心者向けに説明します。

A way to create safe components that are isolated from outside styles and scripts.

Shadow DOM

Shadow DOMは、HTMLの一部として使える「隠れたミニWebページのようなもの」です。

ボタンやウィジェットなどの中身（見た目や動作）を、他のページのCSSやJavaScriptの影響を受けずに安全に分離して作ることができます。

たとえば、外部のカレンダー部品を埋め込んでも、他のスタイルが崩れたりしないように守ってくれます。

この仕組みを使えば、「中の構造は他から見えず」「見た目や動作が壊れにくい部品」を作れます。