访问 Polymer 元素模板中的 div

Question

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

这里是 index.html 结构（我需要选择#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>

我如何选择那个#el div？

Answer 1

如果您的元素在模板内，则它不属于 DOM，而是属于 shadow DOM。作为补充，在 Web Components 站点中有 an article on the topic 和 Rob Dodson 写的 a detailed article about the basics of shadow DOM。

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

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

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

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

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

Javascript 是 associated to a Polymer element with a method call。要通过 shadow DOM 中的 Javascript 进行选择，您应该使用 querySelector。您使用 document.getElementById() 建议的解决方案对 DOM 有效。重点是嵌套模板。你有一个提示another exchange on the topic。 this.shadowRoot.querySelectorAll(...) 建议了一个解决方案，但issue in the Polymer project 涵盖了这一点：这可能有效，但可能不是一个好习惯。 Polymer 文档中有关节点查找的详细信息是 here：在那篇文章中有一个看起来像您的问题的示例。

根据 Polymer 文档，当您调用 Polymer 元素方法时，假设您希望在 ready 事件中进行选择并且 em>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>