Manually Querying Elements In Nested Shadow Dom? API has no recursion? Wasn't like this in PSK1

Question

This is in the context of Chrome where Shadow dom is baked in...

In Polymer Starter Kit 1, there is 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');

I assumed it traversed shadow doms recursively. I'm assuming that the polymer elements, such as paperDrawerPanel, were in a shadow dom at some point even though I didn't have to use Polymer.dom().

But in the starter kit template for Polymer Starter kit 2, I am having to manually query each nested shadow dom.

For example I have:

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>

and

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>

If I want to query <app-drawer id="drawer"> globally I have to do this crazy routine:

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

What changed between PSK1 and PSK2 in Polymer where I have to manually query the nested Shadow Doms? It seems the query API used to have recursion. And is there a better to do this if I need to query #drawer globally?

dman dman · Accepted Answer · 2016-10-03T21:55:18

After asking on the Polymer channel, Shady dom pierces the dom tree where the elements reside in the light dom. PSk1 uses shady dom. PSK2 defaults to Shadow dom if available. With that, I have to manually query each nested level.

Manually Querying Elements In Nested Shadow Dom? API has no recursion? Wasn't like this in PSK1

1 Answers