<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의 새 DOM DOM 사양 (v1)을 따르기 때문에 다른 브라우저 공급 업체 (Mozilla, Microsoft, Apple)와 공유됩니다.

그래서 전에는이 오류를 본 적이 없었습니다. 그것은 added to the Living Standard이었다

해결 방법으로

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

, 당신은 그림자 DOM을 사용하지 않는, 또는 <option> 요소를 확장하지 않는 새로운 사용자 정의 요소를 만들어야합니다.