我希望能够将 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元素会被插入到Shadow DOM中的select中，但是当我打开下拉菜单时它们并没有显示出来。
我认为可能是从HTMLElement继承导致的问题，但是如果我实现HTMLSelectElement也不起作用。
我还尝试了不使用模板直接修改shadow的innerHTML，但是这也不起作用。
我目前的想法是option元素只在select、datalist或optgroup中有效，而浏览器可能会因此出错但没有告诉我。
我很困惑，可能会通过创建第二个item元素占位符来解决这个问题，在我的createdCallback中将其转换为option元素。唉。