Shadow DOM可以保护我的元素吗？

Question

目标：一个包围的小部件

假设我是FakeBook™朋友小部件的开发人员。我为网站所有者提供了一个小部件，可以将这样的个性化消息添加到他们的页面中：

  

你的朋友Michael，Anna和Shirley喜欢这个网页！

第一种方法：创建span

的脚本

天真地，我创建了一个脚本，将此信息放在网站上的span中。但是，ExampleSite的所有者现在可以通过简单的DOM操作访问您朋友的名字！
这是一个很大的隐私/安全问题。

第二种方法：iframe

我不希望ExampleSite访问他们朋友的名字。相反，我让网站所有者使用iframe添加小部件：

<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>

这样可行，因为ExampleSite的所有者无法抓取iframe的内容。但是，整个iframe这个问题相当丑陋，因为没有将整合到网站的样式中，而span就是这样。

所需方法：Shadow DOM

昨天在阅读Shadow Dom时，我想知道这是否可以解决这两个问题。这将允许我创建一个脚本，创建原始网站无法访问的span：

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 spec毕竟说它提供了功能封装，但实际上我想要信任封装。虽然组件模型用例实际列出this use case，但我不确定Shadow DOM是否实现了nesessary confinement 属性。

Answer 1

它没有，但它正在起作用：https://www.w3.org/Bugs/Public/show_bug.cgi?id=20144

信任的封装将涉及为每个影子树创建一个新的脚本上下文，这对于大多数场景来说都是过度的。但是，正如bug所说，我们将添加一个允许这样做的标志（详细信息TBD）。