Question

首先，我为标题血腥道歉。我努力用一句话总结这个问题。

我有一个Polymer元素。在我的元素中，我希望显示（或简单地登录到控制台）模板元素的innerHTML，它是元素实例（的内容）的子元素。

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

考虑以下Polymer元素：

<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（）确实返回了template元素的实例，而innerHTML字段是一个空字符串。

有谁知道为什么会这样？访问content / child模板元素没有设置innerHTML？

其次，是否有人知道一种替代方法，通过该方法我可以访问模板元素的innerHTML，该模板元素是聚合物元素的内容/子元素？

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

Answer 1

这个issue在Polymer的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>
  ...

然后它有效！

如何在元素

1 个答案: