shadow DOM 像 Iframe 一样封装 javascript

Question

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

如果有人有这样做的过程示例，那将很有帮助。谢谢，

Answer 1

这个问题的解决方法是使用 Custom elements and attach the javascript to one of its callbacks。正如 W3C 文档所述：

Custom elements provide a way for authors to build their own fully-featured DOM elements.

自定义元素中封装的 Javascript 的

Here's an example。基本上：

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);

shadow DOM 像 Iframe 一样封装 javascript

shadow DOM encapsulating javascript like an Iframe

html

javascript

shadow-dom