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

这是代码的演示.

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

未捕获的InvalidStateError:无法在"元素"上执行"createShadowRoot":无法在已托管用户代理影子树的主机上创建影子根.

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

Answer 1

你是对的:有可能附加多个阴影根.

...但是这种可能性已经从Chrome 中删除,以符合新版本的Shadow DOM规范(v1),后者现在与其他浏览器供应商(Mozilla,Microsoft,Apple)共享.

这就是你之前从未见过这个错误的原因.它被添加到生活标准中:

3. 如果上下文对象是影子主机,则抛出InvalidStateError.

作为解决方法,您必须不使用Shadow DOM,或创建不扩展<option>元素的新自定义元素.