目標：カプセル化されたウィジェット
私が次のような友達のリストを表示するウィジェットの開発者であるとします。
友達のマイケル、アンナ、シャーリーはこのウェブページが大好きです！
最初のアプローチ：作成するスクリプトspan
span素朴に、私はこの情報をWebサイトのに配置するスクリプトを作成します。ただし、ExampleSiteの所有者は、簡単なDOM操作で友達の名前にアクセスできるようになりました。
これはプライバシー/セキュリティの大きな問題です。
2番目のアプローチ：iframe
ExampleSiteに友達の名前へのアクセスを許可したくありません。代わりに、ウェブサイトの所有者にウィジェットを追加させますiframe：
<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>
ExampleSiteの所有者は、のコンテンツをスクレイプできないため、これは機能しiframeます。ただし、この全体iframeはかなり醜いです。なぜなら、それはWebサイトのスタイリングに統合されていないspanのですが、統合されているからです。
望ましいアプローチ：Shadow DOM
昨日ShadowDomについて読んだとき、それが両方の問題の解決策になるのではないかと思いました。spanこれにより、元のWebサイトがアクセスできないようにするスクリプトを作成できます。
var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';
ただし、** Shadow DOMはそのコンテンツを周囲のページから隠しますか？**
ここでの前提は、私のスクリプト以外は誰も `root`にアクセスできないということですが、それは正しいですか？
結局のところ、Shadow DOM仕様では、機能的なカプセル化が提供されていると書かれていますが、実際には信頼できるカプセル化が必要です。コンポーネントモデルのユースケースには実際にこのユースケースがリストされていますが、ShadowDOMが必要な制限プロパティを実現しているかどうかはわかりません。