访问自定义元素阴影dom的子项

时间:2015-01-28 11:27:47

标签: javascript google-chrome dom polymer shadow-dom

我有一个使用mr. Ruyadornos simple-slider element.

的自定义元素

(我正在研究chrome)

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

当我将简单滑块元素直接放入index.html时,一切运作良好,我看到2张美丽小猫完美滑动的图片。

当我将元素放入自定义元素时 - 如上所述 - 滑块根本不起作用。

我在滑块的代码中挖了一下并对问题进行了本地化:

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 }

有人想解释这种行为吗? :)

修改

我将直接在index.html中滑块的console.log( this.containerElem.children );的输出进行了比较,然后将其作为自定义元素的一部分进行了比较。在index.html中它是一个循环结构,而在另一个中它似乎是一个标准数组。

直接在index.html中调用simple-slider元素的输出 enter image description here

简单滑块的输出,当它位于index.html中调用的自定义元素中

enter image description here

1 个答案:

答案 0 :(得分:1)

我不确定您导入SimpleSlider/simple-slider.html的原因,您应该导入../bower_components/polymer-simple-slider/src/simple-slider.html

我创建了一个工作的示例项目:

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