扩展<选项> [英] Extending <option>

问题描述

我试图扩展 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）{
 caseattr1：
 console.log（this ）; 
} 
} 
} 
}），
 extends：option
}）; 
  

以下是代码的演示。

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

未捕获InvalidStateError：未能在'元素'上执行'createShadowRoot'：无法在已托管用户代理阴影树的主机上创建阴影根。 / p>

我从未见过这个错误，我认为它可以让您附加多个影子根。为什么会发生这种情况，并且是否有办法让它工作？解决方案

你是对的：有可能附加多个阴影根。

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

这就是为什么你以前从未看到过这个错误。将添加到 Living Standard ： / b>

3. 如果上下文对象是影子主机，则会引发InvalidStateError。

作为一种解决方法，您不得不使用Shadow DOM，或者创建一个新的自定义元素扩展了< option> 元素。

I'm trying to extend the 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"
});

Here's a demo of the code.

but apparently that doesn't work because it already has a user agent 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.

I have never seen this error and I thought it lets you attach multiple shadow roots. Why is it happening and is there a way to make it work?

解决方案

You were right: it was possible to attach multiple shadow roots.

... But this possibility was removed from Chrome to comply with the new version of the Shadow DOM specification (v1), which is now shared with other browser vendors (Mozilla, Microsoft, Apple).

That's why you never saw this error before. It was added to the Living Standard:

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

As a workaround, you have to not use Shadow DOM, or to create a new custom element that doesn't extends the <option> element.

这篇关于扩展<选项>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！