Расширение <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

Вы были правы: можно было прикрепить несколько теневых корней.

... Но эта возможность was removed из Chrome соответствует новой версии спецификации Shadow DOM (v1), которая теперь предоставляется совместно с другими поставщиками браузеров (Mozilla, Microsoft, Apple).

Вот почему вы никогда не видели эту ошибку раньше. Это было added to the Living Standard:

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

В качестве обходного пути, вы должны не использовать Shadow DOM, или создать новый пользовательский элемент, который не расширяет <option> элемента.