.content
ネストされたへの JS アクセスを取得するにはどうすればよい<template>
ですか?
<template>
自分の要素 (外部ファイルからテンプレート コンテンツを取得する)を拡張しようとしていますが、ネイティブと同様の方法でimported-template
実装したいと考えています。そうするために、私は単に試します<imported-content>
<content>
this.content.querySelector("imported-content")
しかし、ネストされたテンプレートthis.content
が空であることが発生しました。
<script>
(function() {
var XHTMLPrototype = Object.create((HTMLTemplateElement || HTMLElement).prototype);
XHTMLPrototype.attachedCallback = function() {
//..
var distributeHere = this.content.querySelector("imported-content");
var importedContent = document.createElement("span");
importedContent.innerHTML = "Imported content";
distributeHere.parentNode.replaceChild(importedContent, distributeHere);
}
document.register('imported-template', {
prototype: XHTMLPrototype,
extends: "template"
});
})();
</script>
<template id="fails" bind>
<ul>
<template is="imported-template" bind="{{ appdata }}">
<li>
<imported-content></imported-content>
</li>
</template>
</ul>
</template>
JSFiddleここ
バグなのか、設計上の問題なのか、それともテンプレート シムの制限なのかはわかりません。
間違ったライフサイクルコールバックでチェックしているのかもしれないと思ったので、MutationObserver
ここでフィドルを試してみましたが、同様にミューテーションは発生しません。