javascript - 如何创建已附加影子根的自定义元素

Question

有一个简单的自定义元素

document.registerElement('x-foo', {
    prototype: HTMLElement.prototype;
});

我可以创建一个 HTML 节点

<x-foo></x-foo>

然后在 JavaScript 中选择它，并附加一个影子根。

var xFoo = document.querySelector('x-foo')[0];
var root = xFoo.createShadowRoot();
root.textContent = 'I am a shadow root';

但是，我希望使用预定义的方式创建对象影子根，之后没有任何 JavaScript 操作，就像 <input>和其他用户代理定义的节点。

我将如何为我的元素定义构造函数或其他东西以实现此目的？

Answer 1

问题有点老，但是把这个答案放在这里以防你还没有弄明白。

有 4 种与自定义元素关联的生命周期回调方法。从这个不错的复制 tutorial在 html5rocks 上。

所以为了回答你的问题，你可以把你的代码附加一个 shadow-root 到 createdCallback 中的自定义元素，它会在每次你的 x-code 元素初始化时执行。
这是您的自定义元素的一种构造函数。

希望对您有所帮助。