我试图使用JavaScript从聚合物组件外部访问本地DOM元素。在过去,我可以使用document.querySelector并使用::shadow选择器选择shadowDOM元素。
目前,我了解到本地DOM被实现为"shady DOM“。在这种情况下,如何访问本地DOM元素?
发布于 2015-07-03 05:47:32
假设您有一个如下所示的组件,您需要从组件外部访问div元素:
<dom-module id="my-element">
<template>
<div id="container"></div>
</template>
<script>
Polymer({is: 'my-element'});
</script>
</dom-module>在页面上,将元素放置为:
<my-element id="myElement"></my-element>我们要做的第一件事是在我们的JS页面中获得对custom-element元素的引用:
var myElement = document.getElementById('myElement');现在,为了达到div,我们有两个选择。第一个是聚合物的方便的自动节点查找。这使得组件中的每个元素(存在并在ready之前盖章)都被添加到this.$.<my-id>中。这使得我们很容易从外部接触到,就像这样:
var div = myElement.$.container;但是,如果div没有ID,或者像这样无法到达,您可以使用附加到元素本身的聚合物自己的querySelector,如下所示:
var div = myElement.querySelector('div');不过,我不得不说,这两种方法都应该是与组件交互的“最后手段”。通常,应该公开驱动该组件的DOM的方法或属性,而不是直接公开DOM元素。我建议你来聚合物板聊天,让我们知道你想做什么,我们可以给你一些好的选择。
https://stackoverflow.com/questions/31199131
复制相似问题