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

此处为a demo代码。

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

  

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

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

Answer 1

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

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

这就是为什么你以前从未见过这个错误的原因。那是added to the Living Standard：

  

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

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