javascript - Polymer 添加具有属性的 Html 标签

Question

我的 Polymer 元素显示一些作为属性传递的属性。 content 属性可能包含一些 html 标签，例如 <br>或<p> 。我面临的问题是，Polymer 不会将标签添加到 DOM 树中，而是像普通文本一样打印它们。有没有办法强制“DOM树添加”？

整个元素:

<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="paper-material/paper-material.html">

<dom-module id="card-element" is="auto-binding">

<style>

#contentWrapper {
    padding: 10px 15px;
}

#toolbar {
    --paper-toolbar-background: #607D8B;
    --paper-toolbar: {
        font-size: 125%;
        opacity: 0.9;
    };
}

.maxWidth {
    width: 100%;
}

</style>

<template>

<paper-material elevation="2" class="maxWidth" id="card" animatedShadow="1">
    <paper-material elevation="1" class="maxWidth">
        <paper-toolbar on-click="toggleCollapse" id="toolbar" justify="justified">
            <span class="title">{{convertedDate}}</span><span class="title">{{fach}}</span>
        </paper-toolbar>
    </paper-material>
    <iron-collapse id="collapse">
        <div id="contentWrapper">
            <span>{{content}}</span>
        </div>
    </iron-collapse>
</paper-material>

</template>

<script>

Polymer({
    is: "card-element",
    properties: {
        opened: {
            type: Boolean,
            value: false
        },
        fach: {
            type: String,
            value: "u-oh an Error"
        },
        content: {
            type: String,
            value: "u-oh an Error"
        }
    },
    toggleCollapse: function() {
        if(this.opened) {
            this.$.collapse.hide();
            this.$.card.elevation = "2";
            this.opened = false;
        }
        else {
            this.$.collapse.show();
            this.$.card.elevation = "5";
            this.opened = true;
        }
    },
    ready: function() {
        var date = new Date(this.datum);
        this.convertedDate = date.getDate() + "." + (date.getMonth() + 1) + "." + date.getFullYear();
    }
});

</script>

</dom-module>

Answer 1

polymer 不允许 html 为 prevent XSS attack

但是你可以做到

<dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'html-echo',
      properties: {
        html: {
          type: String,
          observer: '_htmlChanged'
        }
      },
      _htmlChanged: function (neo) {
        // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
        this.innerHTML = neo;
      }
    });
  })();
</script>

使用类似

<html-echo html="[[htmlText]]"></html-echo>