javascript-在带有CONTENT标签的自定义元素中使用SELECT标签的问题

Here’s the jsfiddle showing the behavior.

我希望能够将选项元素拉入Shadow DOM的插入点,但是由于选择为空,因此我认为这没有发生.无论如何,Chrome检查器对插入点并不是很有帮助,但是我已经验证了我的浏览器在执行其他插入点操作时是否可以工作,例如除了将option元素插入select中之外,没有其他事情.

我定义一个自定义元素,如下所示：

var CatpantsProto = Object.create(HTMLElement.prototype);

CatpantsProto.createdCallback = function(e) {
  var shadow = this.createShadowRoot();
  var t = document.getElementById('guy');
  var clone = document.importNode(t.content, true);
  shadow.appendChild(clone);
};

document.registerElement('cat-pants', {
  prototype: CatpantsProto
});

这是#guy模板：

<template id="guy">
  <span>Before</span>
  <select>
    <content></content>
  </select>
  <span>After</span>
</template>

这是用法：

<cat-pants>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</cat-pants>

同样,我希望将这些选项元素插入到Shadow DOM的选择中,但是当我打开下拉菜单时它们不会显示.

我以为可能是从HTMLElement“派生”出了问题,但是如果我也实现HTMLSelectElement也不起作用.

我还尝试过不使用模板并直接修改阴影的innerHTML,但这也不起作用.

我目前的想法是,选择元素仅在选择,数据列表或optgroup之外无效,浏览器抛出某种适合,但没有告诉我.

我不知所措,可能会通过创建第二个item元素占位符来解决此问题,该占位符在我的createdCallback中转换为选项元素.啊

解决方法:

无法使用这种类型的元素创建影子根,因为浏览器本身会创建自己的(用户代理)影子DOM来显示选择控件.

如果是这样,您将收到以下错误：

Failed to execute ‘createShadowRoot’ on ‘Element’: Author-created
shadow roots are disabled for this element.

相反,您应该扩展< select>元素本身,或直接用Javascript复制< option>选项(而不是通过< content>方式).

标签：shadow-dom,custom-element,html5-template,javascript
来源： https://codeday.me/bug/20191120/2045626.html