如何访问元素内容中模板的 innerHTML

Question

首先，我为 title-gore 道歉。我很难用一句话概括这个问题。

我有一个聚合物元素。在我的元素中，我希望显示（或简单地登录到控制台）模板元素的内部 HTML，它是元素实例（的内容）的 child。

（请注意，这里的目的是创建一个类似于 iron-demo-helpers 的 demo-snippet 的元素。）

考虑以下聚合物元素：

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

非常简单，我查询 'template' 元素并记录其内部 HTML。

现在考虑以下用法：

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

正如预期的那样，这导致 "Hello World" 被记录到控制台。但是，我试图在另一个 Polymer 元素中使用 'print-contents-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>

现在，如果我更新用法以包含 simple-demo 元素的实例：

<!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() 执行 return 模板元素的实例，但内部 HTML 字段是一个空字符串。

有人知道为什么会这样吗？访问 content/child 模板元素没有设置其内部 HTML？

其次，有谁知道我可以访问作为聚合物元素 content/child 的模板元素的内部 HTML 的替代方法？

亲切的问候，安德鲁·巴特勒

Answer 1

此 issue 在 Polymer 的 Github 存储库中进行了讨论。

解决方案是在内部 <template> 标签中添加一个 preserve-content 属性：

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

那就成功了！

如何访问元素内容中模板的 innerHTML

How to access innerHTML of a template in the content of an element

html

web-component

polymer

html5-template