CODEWITHSUNDEEP
javascriptgoogle-chromedompolymershadow-dom
Igor L.
Igor L.

Reputation: 3485

Access children of a custom element shadow dom

I have a custom element using mr. Ruyadornos simple-slider element.

(I am working on chrome)

won-thumbnail.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="SimpleSlider/simple-slider.html">

<polymer-element name="won-thumbnail" noscript>
    <template>
        <simple-slider style="width:200px; height: 100px;">
            <img src="http://placekitten.com/g/612/613" />
            <img src="http://placekitten.com/g/612/614" />
        </simple-slider>
    </template>
</polymer-element>

When I place the simple-slider element directly into index.html, everything works well and I see 2 pictures of beautiful kittens sliding perfectly.

When I place the element into a custom element - as above - the slider does not work at all.

I dug a bit into the code of the slider and localized the problem:

console.log( this.containerElem ); // -> prints the simple-slider element correctly
console.log( this.containerElem.children ); // -> prints an array containing both images as expected
console.log( this.containerElem.children.length ); // -> prints 0 ???SOS???
console.log( JSON.stringify( this.containerElem.children ) ); // -> prints { "length": 0 }

Would anyone like to explain this behavior, please? :)

EDIT

I compared the output of console.log( this.containerElem.children ); for the slider being directly in the index.html and then as a part of the custom element. In the index.html it is a circular structure, while in the other one it seems to be a standard array.

Output from simple-slider element being called directly in index.html enter image description here

Output from simple-slider while it resides in the custom element called in index.html

enter image description here

Upvotes: 0

Views: 350

Answers (1)

Michal Kubenka
Michal Kubenka

Reputation: 54

I'm not sure why you are importing SimpleSlider/simple-slider.html, you should import ../bower_components/polymer-simple-slider/src/simple-slider.html

I have created example project where it's working:

https://github.com/mkubenka/polymer-simple-slider-example

Upvotes: 1

Related Questions