Question

我正在使用基本上具有以下核心聚合物组分之一：

<polymer-element attributes="label">
    <div>{{label}}</div>

作为来源的一部分。我想在其中注入一些HTML，以便它最终呈现为：

<div>Item <small>Description</small></div>

有没有办法在不复制整个组件的情况下这样做（考虑到依赖链，这基本上是不可能的）？

Answer 1

Polymer不允许在{{}}表达式中设置HTML，因为它是一个已知的XSS插座。但是，有很多方法（1，2）。

我不确定这个问题是否很好，但我找到了可行的方法。您希望扩展元素，但由于.innerHTML限制，还需要修改其阴影dom。取paper-button as an example后，它有一个内部{{label}}。您可以扩展元素，钻入其阴影dom，并设置容器.innerHTML设置{{label}}。对标签更改做出反应（labelChanged）并致电this.super()：

<polymer-element name="x-el" extends="paper-button">
  <template>
    <shadow></shadow>
  </template>
  <script>
    Polymer('x-el', {
      labelChanged: function() {
        // When label changes, find where it's set in paper-button
        // and set the container's .innerHTML.
        this.$.content.querySelector('span').innerHTML = this.label;

        // call paper-button's labelChanged().
        this.super();
      }
  });
  </script>
</polymer-element>

演示：http://jsbin.com/ripufoqu/1/edit

问题是它很脆弱，需要你知道你要扩展的元素的内部。

是否可以通过属性将HTML注入聚合物组件？

1 个答案: