Polymer 1.0：如何动态添加纸卡标题内容

Question

我是否可以使用paper-card heading内的某些属性动态创建custom element？以下是我尝试但没有奏效的。可能这不是实现我想要的方式:(我用谷歌搜索了几个小时但最终没有任何结果！

自定义元素

<script>
      (function () {
          'use strict';

          Polymer({
              is: 'nearest-customers',

              properties: {
                  customers: {
                      type: Array,
                      value: [],
                      notify: true
                  },

                  cardViewMaxRecords: {
                      type: Number,
                      notify: true
                  },

                  showFullCustomerList: {
                      type: Boolean,
                      value: false,
                      notify: true
                  },
                
                  headingContent: {
                      type: String,
                      value: 'Custom card heading'
                  }
              },

              ready: function () {
                  this.heading.textContent = this.headingContent
              },

          });
      })();
  </script>

HTML

<nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
...
...
...

<script type="text/javascript">
  window.addEventListener('WebComponentsReady', function (e) {
    var nearestCustomers = document.querySelector("#nearestCustomers");
    nearestCustomers.headingContent= "<a href='someurl'><iron-icon icon='fa:arrow-left'></iron-icon></a>&nbsp;This is a new content";
    
  }
</script>

我的目标是在标题文字前添加iron-icon，图标可以用作某个地方的link。

提前致谢

Answer 1

我确信有更好的方法，但我只是添加了样式和结构：

      <div class="header paper-card">
          <div class="title-text paper-card">
          <iron-icon icon="book"></iron-icon> Reading List 
          </div>
      </div>