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

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个生命周期回调方法与自定义元素相关联。在html5rocks上从这个漂亮的tutorial复制。

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

希望它有所帮助。