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

下面是显示行为的jsfiddle。

我希望能够将option元素拉入Shadow DOM中的插入点，但由于select是空的，我认为这不会发生。无论如何，Chrome检查器对插入点没有太大帮助，但我已经验证了我的浏览器在执行其他插入点操作时可以工作，例如，在select中插入option元素之外的任何操作。

我定义了一个自定义元素：

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元素被插入到ShadowDOM中的select中，但当我打开下拉列表时，它们没有显示出来。

我认为从HTMLElement"派生"可能是个问题，但如果我实现HTMLSelectElement，它也不起作用。

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

我目前的想法是，option元素在select s、datalist s或optgroup s之外是无效的，浏览器正在进行某种调整，但没有告诉我这一点。

我不知所措，可能会通过创建第二个item元素占位符来解决这个问题，该占位符将在我的createdCallback中转换为option元素。啊。