Javascript 如何创建已附加阴影根的自定义元素

具有简单的自定义元素

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

我可以创建一个HTML节点

<x-foo></x-foo>

但是，我希望使用预定义的 shadowroot，之后不需要任何JavaScript操作，就像使用

和其他用户代理定义的节点

---

为了实现这一点，我应该如何为我的元素定义构造函数或其他东西？

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

有4种与自定义元素关联的生命周期回调方法。在html5rocks上复制此文件

所以，为了回答您的问题，您可以在createdCallback内将阴影根附加到自定义元素的代码，并且每次初始化x-code元素时都会执行该代码。
这是一种自定义元素的构造函数

希望能有帮助

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