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

Question

I am building an element with Polymer with this structure:

  <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>

I try to set a default value for the src attribute of the <content select="img"> in case its not set deliberately inside the <e-card> element:

...
<script>

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

</script>
...

On browser the value in the script is applied in the <content select="img"> at the Shadow DOM but not in the <img> element inside the <e-card> . How can I apply the default value for the src attribute in the <img> element?

Answer 1

it might be easier to just go ahead and make your image tag in the element and publish the the src attribute out side your element. then you could set the default path in js and still have the content be user configurable.

<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>