2

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

我有一个聚合物元素。在我的元素中，我希望显示（或简单地登录到控制台）作为元素实例（内容）的子元素的模板元素的 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>

非常简单，我查询“模板”元素并记录其内部 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() 确实返回了模板元素的实例，但 innerHTML 字段是一个空字符串。

有谁知道为什么会这样？访问内容/子模板元素没有设置其 innerHTML？

其次，有谁知道另一种方法，通过它我可以访问作为聚合物元素的内容/子元素的模板元素的 innerHTML？

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

4

1 回答 1

2

这个问题在 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>
  ...

然后它起作用了！

于 2016-12-10T21:57:07.020 回答