3

.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 ここでフィドルを試してみましたが、同様にミューテーションは発生しません。

4

1 に答える 1