将默认属性设置为 Polymer 内容标签

Question

我正在使用具有这种结构的 Polymer 构建一个元素：

  <template>

    <style>
      ...
    </style>

    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h1"></content>
    </div>
    <content></content>

  </template>

  <script>

    Polymer({});

  </script>
</polymer-element>

我尝试为 <content select="img"> 的 src 属性设置一个默认值，以防它不是在 <e-card> 元素中故意设置的：

...
<script>

  Polymer({
     srcimg: 'default-picture.png'
  });

</script>
...

在浏览器上，脚本中的值应用于影子 DOM 处的 <content select="img">，但不应用于 <e-card> 内的 <img> 元素。如何在 <img> 元素中应用 src 属性的默认值？

Answer 1

继续在元素中制作图像标签并在元素外发布 src 属性可能会更容易。那么您可以在 js 中设置默认路径，并且仍然可以让用户配置内容。

<polymer-element name="test-element" attributes="img height width">
<template>

<style>
  ...
</style>

<div class="card-header" layout horizontal center>
  <img src="{{img}}" height="{{height}}" width="{{width}}">
  <content select="h1"></content>
</div>
<content></content>

</template>

<script>

Polymer({
  ready: function () {
    this.img = "default image url";
    this.height = "100px";
    this.width = "100px"
  }
});

</script>
</polymer-element>

将默认属性设置为 Polymer 内容标签

Set default attribute to a Polymer content tag

polymer