Javascript 访问聚合物元素模板内部的div
我试图在一个div上使用核心动画，来设置它的位置动画。为此，我必须使用document.getElementById（）选择它。 问题是，我的index.html文件中有一个相当复杂的结构，我找不到选择该div的方法 下面是index.html结构（我需要选择#el）： My index.html文件：Javascript 访问聚合物元素模板内部的div,javascript,selector,polymer,shadow-dom,Javascript,Selector,Polymer,Shadow Dom,我试图在一个div上使用核心动画，来设置它的位置动画。为此，我必须使用document.getElementById（）选择它。 问题是，我的index.html文件中有一个相当复杂的结构，我找不到选择该div的方法 下面是index.html结构（我需要选择#el）： My index.html文件： <template is="auto-binding" id="t"> <!-- Route controller. --> <flatiron-
<template is="auto-binding" id="t">
<!-- Route controller. -->
<flatiron-director route="{{route}}" autoHash></flatiron-director>
<!-- Keyboard nav controller. -->
<core-a11y-keys id="keys" target="{{parentElement}}"
keys="up down left right space space+shift"
on-keys-pressed="{{keyHandler}}"></core-a11y-keys>
<core-header-panel>
<core-toolbar class="panel-personal" hidden?="{{shortView}}">
...
</core-toolbar>
<core-toolbar class="panel-nav">
<paper-tabs valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
on-core-select="{{menuItemSelected}}" link flex style="width:100%; height:100%;" id="tabs">
<template repeat="{{page, i in pages}}">
<paper-tab><a href="#{{page.hash}}">{{page.date_month}}<br/><small>{{page.date_year}}</small></a></paper-tab>
</template>
</paper-tabs>
</core-toolbar>
<nav class="menu">
...
</nav>
<div horizontal layout fit>
<core-animated-pages id="pages" selected="{{route}}" valueattr="hash"
transitions="slide-from-right"
on-tap="{{cyclePages}}" flex self-stretch>
<template repeat="{{page, i in pages}}">
<section hash="{{page.hash}}" class="card-wrapper">
<div flex fit>
<div class="card-container" vertical layout fit >
<h1>{{page.name}}</h1>
<h2>{{page.category}}</h2>
<paper-button raised class="project_button"><a href="{{page.link}}" target="_blank"><core-icon icon="social:share" ></core-icon> visit project</a> </paper-button>
</div>
<div center-justified layout fit class="card-content">
<div>
<h4>Project description</h4>
<p>{{page.desc}}
</p>
</div>
</div>
<div class="card-background" id="el" fit></div>
</div>
</section>
</template>
</core-animated-pages>
</div>
</core-header-panel>
</template>
...
...
{{page.name}
{{page.category}
项目说明
{{page.desc}}
如何选择该#el div？如果您的元素位于模板中，那么它不属于DOM，而是属于。作为补充，在WebComponents网站上有RobDodson写道 编辑：Polymer 1.0引入了一个特定的概念 我承认一个聚合元素、多个模板和阴影DOM之间的关系对我来说并不明显。乍一看，阴影DOM与模板相关联。有一些解释可以在中找到。重复似乎会让事情变得微妙：这里有一个阴影DOM，ID变得毫无意义。更糟糕的是，我猜你有嵌套的阴影DOM，因为嵌套的模板。我根本不清楚的是：在这样的背景下，可见性如何 编辑：有关可见性的更多信息，请访问 编辑：模板重复语法 作为结论（据我所知），由于模板重复即使在重复的模板阴影DOM中，也可以有多个相同的ID。有效的策略是使用类而不是ID进行选择 Javascript是。要在阴影DOM中通过Javascript进行选择，应该使用querySelector。使用document.getElementById（）建议的解决方案对DOM有效。重点是关于嵌套模板。你有一个暗示。建议使用this.shadowRoot.queryselectoral（…）来解决这个问题，但an涵盖了这一点：这可能有效，但可能不是一个好的实践。Polymer文档中关于节点查找的详细信息是：在那篇文章中，有一个示例看起来像您的问题 根据Polymer文档，当您调用Polymer元素方法时，假设您希望在ready事件中进行选择，并在嵌套模板中分配容器ID，这应该如下所示：
<polymer-element name="my-element"...>
<template ...>
<div id="container">
<template ...>
...
<div class="el">
</div>
...
</template>
</div>
</template>
<script>
Polymer('my-element', {
ready: function() {
this.$.container.querySelector('.el');
}
});
</script>
</polymer-element>
...
...
聚合物（“my-element”{
就绪：函数（）{
此.container.querySelector（'.el'）；
}
});
<polymer-element name="my-element"...>
<template ...>
<div id="container">
<template ...>
...
<div class="el">
</div>
...
</template>
</div>
</template>
<script>
Polymer('my-element', {
ready: function() {
this.$.container.querySelector('.el');
}
});
</script>
</polymer-element>
...
...
聚合物（“my-element”{
就绪：函数（）{
此.container.querySelector（'.el'）；
}
});
eldiv#eleldiv#el