[英]Access children of a custom element shadow dom
我有一个使用Mr的自定义元素。 Ruyadornos简单滑块元素。
(我正在开发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时,一切正常,并且我看到两张漂亮的小猫的照片完美滑动。
当我将元素放入自定义元素中时(如上所述),滑块根本不起作用。
我对滑块的代码进行了一些研究,并定位了问题所在:
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 );
的输出console.log( this.containerElem.children );
该滑块直接位于index.html中,然后作为自定义元素的一部分。 在index.html中,它是一个圆形结构,而在另一个结构中,它似乎是一个标准数组。
simple-slider元素的输出在index.html中直接调用
Simple-Slider的输出驻留在index.html中调用的自定义元素中时
我不确定为什么要导入SimpleSlider/simple-slider.html
,应该导入../bower_components/polymer-simple-slider/src/simple-slider.html
我创建了工作示例项目:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.