Question

这是在Chrome中使用Shadow dom烘焙的情境......

在Polymer Starter Kit 1中，有a great example of being able to globally query a element - app.$.paperDrawerPanel.closeDrawer();。 Here is another great example - var middleContainer = Polymer.dom(document).querySelector('#mainToolbar .middle-container');

我认为它递归地遍历了影子doms。我假设聚合物元素，例如paperDrawerPanel，在某些时候处于阴影中，即使我不必使用Polymer.dom()。

但是在Polymer Starter kit 2的入门套件模板中，我不得不手动查询每个嵌套的阴影dom。

例如我有：

MY-app.html

 <dom-module id="my-app">
   <template>
    <app-header-layout fullbleed has-scrolling-region>
      <!-- Drawer content -->
      <app-header fixed shadow>
        <app-toolbar>
          <paper-icon-button icon="menu" on-tap="_drawerToggle"></paper-icon-button>
          <div main-title class="app-name">Dolphin</div>
        </app-toolbar>
      </app-header>

  <!-- Main content -->
  <iron-pages
      selected="[[page]]"
      attr-for-selected="name"
      fallback-selection="view404"
      role="main">
    <my-view1 name="view1"></my-view1>

和

MY-view.html：

<dom-module id="my-view1">
  <template>
    <app-drawer id="drawer">
          <div class='left-bar-container'>
            <app-toolbar class="toolbar-drawer">Menu</app-toolbar>
            <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
              <a name="view1" href="/view1">Home</a>
              <a name="view2" href="/view2">Users</a>
              <a name="view3" href="/view3">Contact</a>
            </iron-selector>
          </div>
        </app-drawer>

如果我想全局查询<app-drawer id="drawer"> ，我必须做这个疯狂的例程：

level1 = Polymer.dom(document.querySelector('my-app').root)
level2 = Polymer.dom(level1).querySelector('my-view1').root
Polymer.dom(level2).querySelector('#drawer')

在Polymer中PSK1和PSK2之间有什么变化，我必须手动查询嵌套的Shadow Doms？似乎查询API用于递归。如果我需要全局查询#drawer，还有更好的方法吗？

Answer 1

在询问聚合物通道后，Shady dom刺穿了dom树，其中元素位于light dom中。 PSk1使用阴暗的dom。如果可用，PSK2默认为暗影dom。有了它，我必须手动查询每个嵌套级别。

手动查询嵌套阴影Dom中的元素？ API没有递归？在PSK1中不是这样的

1 个答案: