访问 Polymer 元素模板内部的 div

Question

我正在尝试在 div 上使用核心动画来为其位置设置动画。为此，我必须使用 document.getElementById() select 它。问题是，我的 index.html 文件中有一个相当复杂的结构，我找不到 select 的方法 div.

这是 index.html 结构（我需要 select #el）：http://i.imgur.com/phWyArO.jpg

我的 index.html 文件：

    <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>

我怎么 select #el div？

Answer 1

如果您的元素在模板内，则它不属于 DOM，而是属于 shadow DOM. As a complement, in the Web Components site there is an article on the topic and Rob Dodson wrote a detailed article about the basics of shadow DOM.

编辑 : Polymer 1.0引入了一个特定的概念，Shady DOM...

我承认聚合物元素、多个模板和 阴影 DOM 之间的关系对我来说并不是很明显。乍一看，shadow DOM 与模板相关联。 that other article by Rob Dodson about templates repetition 中提供了一些解释。似乎随着重复，事情变得微妙：这里你有一个 shadow DOM 并且 ID 变得毫无意义。更糟糕的是，我猜你已经嵌套了 shadow DOMs 因为嵌套模板。我完全不清楚的是：在这种情况下可见性如何？

编辑：有关可见性的更多信息，请参见...

编辑：模板重复语法has evolved in Polymer 1.0

作为结论（据我所知），由于模板重复，即使在重复的模板中，您也可能有多个相同的 ID shadow DOM。有效的策略是使用class而不是ID进行选择。

Javascript 是 associated to a Polymer element with a method call. To select via Javascript in the shadow DOM, you should use the querySelector. The solution you suggested with document.getElementById() is valid for the DOM. The point is about nested templates. You have a hint with another exchange on the topic. A solution is suggested with this.shadowRoot.querySelectorAll(...) but an issue in the Polymer project covers the point: this could work but probably not a good practice. The details in the Polymer documentation about node finding are here：在那篇文章中有一个示例看起来像您的问题。

根据 Polymer 文档，当您调用 Polymer 元素方法时，假设您想要在 ready 事件和嵌套模板中分配的 container 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>

访问 Polymer 元素模板内部的 div

Accessing a div inside of a Polymer element template

javascript

selector

shadow-dom

polymer