要素の内容でテンプレートのinnerHTMLにアクセスする方法

Question

まず、タイトル・ゴアについてお詫び申し上げます。私はこの問題を1つの文で要約するのに苦労しました。

私はポリマーエレメントを持っています。私の要素では、要素インスタンス（の内容）の子要素であるテンプレート要素のinnerHTMLを表示（または単にコンソールに記録）したいと考えています。

（ここでの意図は、鉄 - デモ - ヘルパーのデモ・スニペットに似た要素を作成することであることに注意してください。）

次ポリマー要素考えてみましょう：、非常に単純

<link rel="import" href="../../polymer/polymer.html"> 
<dom-module id="print-contents-html"> 
    <script> 
    Polymer({ 
     is: 'print-contents-html', 

     attached: function() { 
     var template = Polymer.dom(this).queryDistributedElements('template')[0]; 
     console.log(template.innerHTML); 
     } 
    }); 
    </script> 
</dom-module> 

を私は 'テンプレート'要素を照会し、内部のHTMLを記録します。コンソールに記録されている

予想通り ​​

、これは結果 "Hello World" の中：

は今、次の使用を検討してください。 はしかし、私は別のポリマー要素内に「印刷コンテンツのhtml」要素を利用するようにしようとしています：

<link rel="import" href="../../polymer/polymer.html"> 
<link rel="import" href="./print-contents-html.html"> 

<dom-module id="simple-demo"> 
    <template> 
    <print-contents-html> 
     <template> 
     Hello World from simple demo 
     </template> 
    </print-contents-html> 
    </template> 
    <script> 
    Polymer({ 
     is: 'simple-demo', 
    }); 
    </script> 
</dom-module> 

今、私は使用を更新した場合も、単純デモ要素のインスタンスを含めます

「Hello World」と「Hello World from simple demo」の両方がコンソールに記録されることが予想されます。ただし、シンプルなデモメッセージは記録されません。

queryDistributedElements（）はテンプレート要素のインスタンスを返しますが、innerHTMLフィールドは空の文字列です。

これは誰でも知っていますか？コンテンツ/子テンプレート要素へのアクセスにinnerHTMLが設定されていないことを確認しますか？

第2に、ポリマー要素の内容/子であるテンプレート要素のinnerHTMLにアクセスできる代替方法を知っている人はいますか？

種類よろしく、 アンドリュー・バトラー

Answer 1

このissueは、ポリマーのGitHubのリポジトリに議論されています。

ソリューションはpreserve-contentはそれをインナー<template>タグ属性を追加することです：

<dom-module id="simple-demo"> 
    <template> 
    <print-contents-html> 
     <template preserve-content> 
     Hello World from simple demo 
     </template> 
    </print-contents-html> 
    </template> 
    ... 

をそれからそれは動作します！