如何访问元素内容中的模板的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

回答

相关问题