Question

我试图在div上使用核心动画来动画它的位置。要做到这一点，我必须使用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组件站点中有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 doc，当您调用 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>

访问Polymer元素模板中的div

1 个答案: