如何訪問元素內容中的模板的innerHTML

首先，我爲標題戈爾道歉。我努力用一句話總結這個問題。如何訪問元素內容中的模板的innerHTML

我有一個聚合物元素。在我的元素中，我希望顯示（或簡單地登錄到控制檯）作爲元素實例（的內容）的子元素的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>

現在，如果我更新使用還包括簡單的演示元素的實例：

<!doctype html> 
<html> 
    <head> 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="./print-contents-html.html"> 
    <link rel="import" href="./simple-demo.html"> 
    </head> 
    <body> 
    <print-contents-html> 
     <template> 
     Hello World 
     </template> 
    </print-contents-html> 

    <simple-demo></simple-demo> 
    </body> 
</html>

我期望看到記錄到控制檯的「Hello World」和「Hello World from simple demo」。但是，簡單的演示消息不會被記錄。

看起來雖然queryDistributedElements（）確實返回模板元素的實例，但innerHTML字段是一個空字符串。

有誰知道這是爲什麼？訪問content/child模板元素沒有設置innerHTML？

其次，有沒有人知道一種替代方法，通過它我可以訪問作爲聚合物元素的內容/子元素的模板元素的innerHTML？

親切的問候，安德魯·巴特勒

來源

2016-11-12 Andrew Butler

這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> 
    ...

然後它的作品！

來源

2016-12-10 21:57:07 Supersharp

如何訪問元素內容中的模板的innerHTML

回答

相關問題