擴展<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>元素的新自定義元素。