扩展<option>

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

这是代码的演示。

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

Uncaught :未能在'createShadowRoot‘上执行’createShadowRoot‘：无法在已经承载用户代理影子树的主机上创建阴影根。

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

Answer 1

你是对的:它有可能附加多个影子根。

..。但这一可能性来自Chrome，以符合新版本的阴影DOM规范(v1)，这是目前共享的其他浏览器供应商(Mozilla，微软，苹果)。

这就是为什么你以前从没见过这个错误。是添加到

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

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