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

Question

我有一个使用 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>

当我将 simple-slider 元素直接放入 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 }

有人愿意解释一下这种行为吗？ :)

编辑

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

在 index.html 中直接调用简单滑块元素的输出

简单滑块驻留在 index.html

中调用的自定义元素中时的输出

Answer 1

我不确定你为什么要导入 SimpleSlider/simple-slider.html，你应该导入 ../bower_components/polymer-simple-slider/src/simple-slider.html

我已经创建了它正在运行的示例项目：

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

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

Access children of a custom element shadow dom

javascript

google-chrome

dom

polymer

shadow-dom