Javascript 扩展<；选项>；

我正在尝试扩展

HTMLOptionElement

<template id="cOptionTemplate">
    <content></content>
</template>

<select>
    <option is="custom-option">Test</option>
</select>

这是代码的一部分

但显然这不起作用，因为它已经有了一个用户代理shadowRoot

未捕获InvalidStateError:未能在“元素”上执行“createShadowRoot”：无法在已承载用户代理卷影树的主机上创建卷影根

---

我从未见过这个错误，我认为它可以让你附加多个阴影根。为什么会发生这种情况？有没有办法让它工作？

你是对的：可以附加多个阴影根

。。。但Chrome的这种可能性是为了符合新版本的ShadowDOM规范（v1），该规范现在与其他浏览器供应商（Mozilla、Microsoft、Apple）共享

这就是为什么你以前从未见过这个错误。它是：

如果上下文对象是阴影主机，则抛出InvalidStateError

---

作为一种解决方法，您不必使用Shadow DOM，也不必创建一个新的自定义元素来扩展

元素。

这是否意味着我现在只能在自定义元素上附加一个新的Shadow DOM，因为许多本机元素都有自己的用户代理Shadow DOM？是的，很遗憾：（工作组在这里讨论过：和/102。这太糟糕了。无论如何，谢谢。是的。我们希望在未来的版本中，聪明的供应商会删除他们的用户代理阴影树，让我们不用添加我们的。这很好，但我不确定他们如何在没有预定义阴影树的情况下实现某些功能。

var cOption = document.registerElement('custom-option', {
    prototype: Object.create(HTMLOptionElement.prototype, {
        createdCallback: {
            value: function() {
                var template = document.getElementById("cOptionTemplate")
                var clone = document.importNode(template.content, true);
                this.createShadowRoot().appendChild(clone);
            }
        },
        attributeChangedCallback: {
            value: function (attrName, oldVal, newVal){
                switch(attrName){
                    case "attr1":
                        console.log(this);
                }
            }
        }
    }),
    extends: "option"
});