我有一个使用 mr. Ruyadornos simple-slider element. 的自定义元素
(我正在使用 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>
当我将 simple-slider 元素直接放入 index.html 中时,一切正常,我看到 2 张漂亮小猫的图片完美滑动。
当我将元素放入自定义元素中时(如上所述), slider 根本不起作用。
我深入研究了 slider 的代码并定位了问题:
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 );
的输出, slider 直接位于 index.html 中,然后作为自定义元素的一部分。在index.html中它是一个循环结构,而在另一个中它似乎是一个标准数组。
直接在index.html中调用simple-slider元素的输出
simple-slider 驻留在 index.html 中调用的自定义元素中时的输出
最佳答案
我不确定您为什么要导入 SimpleSlider/simple-slider.html
,您应该导入 ../bower_components/polymer-simple-slider/src/simple-slider。 html
我已经创建了一个正在运行的示例项目:
关于javascript - 访问自定义元素 Shadow dom 的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28191102/