ウェブコンポーネントにおける重要な側面の一つが、カプセル化です。マークアップ構造、スタイル、動作を隠蔽し、コード上の他のコードから分離することで、他の部分でクラッシュすることを防ぎ、コードをきれいにしておくことができます。シャドウ DOM API はこの主要部分であり、隠蔽され分離された DOM を要素に取り付けるための方法を提供しています。この記事ではシャドウ DOM を使う基本を記述しています。 この記事は、すでにあなたが DOM (Document Object Model) の概念を理解していることを想定しています。これはツリー上の構造で、接続されたノードがマークアップ文書(ウェブ文書の場合は通常 HTML 文書)に現れるさまざまな要素や文字列を表します。例として、以下のような HTML の断片を考えてみましょう。 <!doctype html> <html lang="en-US
![shadow DOM の使い方 - Web Components | MDN](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa767575b4232d312d2c5de428f0bf0955805e26/height=288;version=1;width=512/https%3A%2F%2Fdeveloper.mozilla.org%2Fmdn-social-share.cd6c4a5a.png)