扩展<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？

Uncaught InvalidStateError: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts an user-agent shadow tree.

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

Answer 1

你说得对：有可能附加多个影子根。

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

这就是为什么你以前从未看到这个错误。这是added to the Living Standard：

3. If context object is a shadow host, then throw an InvalidStateError.

作为一种变通方法，您可以选择不使用影子DOM，或创建不扩展<option>元素的新自定义元素。