Polymer Inconsistent data with multiple component instances - polymer

Question

I am using mp-slider (polymer 2.0) but needed the caption to be a link. I added the property sliderLink (as shown below) Everything seemed to be working except that the URL value for all instances is the value for the last instance. For example, if my links are google.com/1 google.com/2 yahoo.com/1 the links on all slides are yahoo.com/1
To address this I added value: function() { return []; } and I tried a few version of the syntax with no change in my results.
The oddity to me is that with three uses of the property, One instance has the correct value and the other two do not.
<link rel="import" href="../polymer/polymer.html">
<dom-module id="mp-caption">
<template>
<style>
#caption {
width: 100%;
background: var(--caption-background);
padding: 5px 20px;
position: absolute;
bottom: 0;
box-sizing: border-box;
transition: all 2s linear;
}
#caption h3, #caption p { color: var(--white-color) }
#caption h3 {
font-size: 20px;
margin: 10px 0;
padding: 0
}
#caption p {
font-size: 14px;
margin: 5px;
padding: 5px 0
}
</style>
<template is="dom-if" if="{{sliderLink}}">
<div id="caption">
<h3><a href={{sliderLink}}>{{sliderHeader}}</a></h3><!-- incorrect value for sliderLink here -->
<p><a href={{sliderLink}}>{{sliderContent}}</a></p><!-- incorrect value for sliderLink here -->
<p>{{sliderLink}}</p> <!-- correct value for sliderLink here -->
</div>
</template>
<template is="dom-if" if="{{!sliderLink}}">
<div id="caption">
<h3>{{sliderHeader}}</h3>
<p>{{sliderContent}}</p>
</div>
</template>
</template>
<script>
class mpCaption extends Polymer.Element {
static get is() {
return 'mp-caption'
}
static get properties() {
return {
sliderHeader: String,
sliderContent: String,
sliderLink: {String, value: function() { return []; }},
}
}
}
customElements.define(mpCaption.is, mpCaption);
</script>
</dom-module>
The only difference between the three uses is that the last one is not linked. Is this a bug, or am I missing something needed to make these properties URLs?
Thank you

Answer 1

Try binding to the href attribute instead of the property:
<a href$={{sliderLink}}>
For more info see the Polymer docs on binding to native HTML elements.

Answer 2

As Kate Jeffreys told you you should use attribute binding:
<a href$="{{sliderLink}}"></a>
I don't know how are you passing the value of each property but your example works without any problem.
I had to remove the position: absolute so I could see each caption without seeing it one on top of the other.
Another thing I have changed was the property sliderLink, you returned an empty array but doesn't make sense in a property of type String.
Here you can see the code: mp-caption code
Here you can check out the demo: mp-caption demo