I have a slider element that contains list of slides and a img to show hovered slide as shown below. I am binding currentImage between custom-slide(child) and custom-slider(parent)
CASE I
custom-slider.html
<template>
<div>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
</div>
<img src="{{currentImage}}">
</template>
It works perfectly when I used like this.
index.html
<body>
<custom-slider>
</custom-slider>
</body>
But when I change index and custom-slider html as shown below, it's not working. The hovered custom-slide not showing in the img tag. It's not getting updated.
CASE II
index.html
<body>
<custom-slider>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
<custom-slide current-image="{{currentImage}}"></custom-slide>
</custom-slider>
</body>
custom-slider.html
<template>
<div>
<content select="custom-slide, [custom-slide]"></content>
</div>
<img src="{{currentImage}}"></custom-slide>
</template>
No errors in the console as well.
I have a property called currentImage for both custom-slide and custom-slider as shown and even I used notify: true to the property.
currentImage: {
type: String,
value: 'some_image_url_by_default',
notify: true
}
and on mouseover on custom-slide I have a event that is to update the customImage in custom-slider. The image url is updating in custom-slide but not in custom-slider. It is updating in both only when I used the first case code of my question.
UPDATE
When I have binding directly in the template of any Custom element then the binding is working. But when I have binding indirectly i.e, using <content> tag then the binding is not working. For example,
<parent-elem></parent-elem> // custom element
Parent element template
<dom-module id="parent-elem">
<template>
<div>{{name}}</div>
</template>
// Assume here in script I have a property name
</dom-module>
Like above, it is working.
But in the above code if I replace <div>{{name}}</div> with <content></content> and change
<parent-elem>
<div>{{name}}</div>
</parent-elem> // custom element
then the binding is not working. Why? Then what is the use of having a <content> tag?
EDIT
Plunker with problem
In that plunker check the images by hover them. First three are without content tag and next three are by using content tag. Give me the solution. Help would be appreciated.
See Question&Answers more detail:
os 
