javascript - CONTENT タグのあるカスタム要素で SELECT タグを使用する際の問題

Question

これが動作を示すjsfiddleです。

optionShadow 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。

また、テンプレートを使用せずに を直接変更して実験しましたshadowが、それもうまくいきませんでした。innerHTML

私の現在の考えでは、要素はs、s、またはs のoption外では有効ではなく、ブラウザーは何らかの適合を投げかけていますが、それについては教えてくれません。selectdatalistoptgroup

私は途方に暮れており、おそらくmy の要素にitem変換される2番目の要素プレースホルダーを作成することでこれを回避します ああ。optioncreatedCallback