在具有CONTENT标记的自定义元素中使用SELECT标记时出现问题

Question

这是显示行为的jsfiddle 。

我希望能够将option元素拉入Shadow DOM中的插入点，但是，由于select是空的，我不认为这种情况正在发生。 在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>

同样，我希望将这些option元素插入到Shadow DOM中的select中，但是当我打开下拉列表时它们不会显示。

我想也许从HTMLElement “派生”是问题所在，但是如果我实现HTMLSelectElement它也HTMLSelectElement 。

我也尝试过不使用模板并直接修改shadow的innerHTML ，但这也不起作用。

我现在的想法是， option元素只是没有有效的外部select S， datalist S或optgroup S和浏览器被投掷某种契合，但没有告诉我这件事。

我很茫然，可能会通过创建第二个item元素占位符来解决这个问题，该占位符将转换为createdCallback option元素。 哎呀。

Answer 1

无法使用该类型的元素创建阴影根，因为浏览器本身会创建自己的（用户代理）阴影DOM以显示选择控件。

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

无法在“元素”上执行“createShadowRoot”：为此元素禁用作者创建的阴影根。

相反，您应该扩展<select>元素本身，或者使用Javascript（而不是通过<content>方式）复制<option>s 。