扩展 <选项>

Question

我正在尝试扩展HTMLOptionElement，

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

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

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

这是代码的a demo。

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

未捕获的 InvalidStateError：无法在“元素”上执行“createShadowRoot”：无法在已托管用户代理影子树的主机上创建影子根。

我从未见过这个错误，我认为它可以让你附加多个影子根。为什么会这样？有没有办法让它发挥作用？

Answer 1

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

...但是这种可能性来自 Chrome 的was removed 以符合新版本的 Shadow DOM 规范 (v1)，该规范现在与其他浏览器供应商（Mozilla、Microsoft、Apple）共享。

这就是您以前从未见过此错误的原因。是added to the Living Standard:

1. 如果上下文对象是影子主机，则抛出 InvalidStateError。

作为一种解决方法，您必须不使用 Shadow DOM，或者创建不扩展 <option> 元素的新自定义元素。