像 iframe 一样封装 javascript 的 shadow DOM答案

【问题标题】：shadow DOM encapsulating javascript like an Iframe像 iframe 一样封装 javascript 的 shadow DOM
【发布时间】：2017-02-06 15:50:40
【问题描述】：

我试图弄清楚在 Shadow DOM 中执行的 Javascript 是否可以限定范围（例如 sandbox property of an iframe tag does）。我不希望加载的 Javascript 与页面内容的其余部分混淆，或者事件可以访问诸如 window.open 之类的属性，最终可能会在任何地方打开标签。

如果有人有这样的程序示例，那将是非常有帮助的。谢谢，

【问题讨论】：

不，这不是 shadow DOM 所做的事情的一部分（即使这样做，您也不应该执行“最终可能会在所有地方打开标签页”的不受信任的代码。
arf.谢谢乔丹。如果未来版本发生变化，我会保持问题开放。
在你的 shadow dom 中放置一个沙盒 iframe...

标签： javascript html shadow-dom

【解决方案1】：

解决此问题的建议是使用Custom elements 并将javascript 附加到one of its callbacks。正如 W3C 文档所述：

自定义元素为作者提供了一种构建自己功能齐全的 DOM 元素的方法。

Here's an example 的自定义元素中封装的 Javascript。基本上：

var HTMLCustomElement = Object.create(HTMLElement.prototype);
HTMLCustomElement.createdCallback = function() {
// Put the callback function here and attach the HTML to the current element
// Define the element
var NewElement = document.registerElement('new-element', {
  prototype: HTMLCustomElement
});

// instanciate the custom element
var newElement = new NewElement();

document.body.appendChild(newElement);

【讨论】：