Which querySelector on <paper-toolbar> is better?

[Darin Hensley]

    var toolbar = Polymer.dom(document).querySelector('#main-toolbar'

-------------------------

    

    var toolbar = document.querySelector('#main-toolbar');

--------------------------

    <paper-toolbar id="main-toolbar">

1) why does `document.querySelector` work on `paper-toolbar` when it's a shadow dom element? or another way to put it... why does it work on a element that is in local dom?

2) since both of these `querySelector` work, which is better to use?

[Eric Bidelman]

On Sat, Nov 21, 2015 at 3:30 PM Darin Hensley <darin....@gmail.com> wrote:

    var toolbar = Polymer.dom(document).querySelector('#main-toolbar'

-------------------------

    

    var toolbar = document.querySelector('#main-toolbar');

--------------------------

    <paper-toolbar id="main-toolbar">

1) why does `document.querySelector` work on `paper-toolbar` when it's a shadow dom element? or another way to put it... why does it work on a element that is in local dom?

Shady DOM doesn't offer proper scoping of DOM like native Shadow DOM does. It's a limitation of the polyfill. The full web components polyfill did.

2) since both of these `querySelector` work, which is better to use?

If you're outside of a Polymer element in the main document, use  document.querySelector('#main-toolbar');. The only time you need the Polymer.dom() APIs is if you're in an element.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/07285585-7722-4dcd-9c8a-feaf1b196448%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arthur Evans]

Is the <paper-toolbar> in the main document? Because #1 should not work unless the <paper-toolbar> is in the main document. But if it is, then it should find the <paper-toolbar>, because <paper-toolbar> isn't "a shadow DOM element", it's an element that hosts a shadow DOM (or shady DOM) tree. (In the docs, we use "local DOM" so we don't have to keep saying, "shadow DOM or shady DOM".) 

If <paper-toolbar> itself is in the main document, you should be able to find it (but not elements inside its shadow DOM/shady DOM tree). For example, if you try to retrieve a div inside <paper-toolbar>.

    var topBar = Polymer.dom(document).querySelector('#topBar');

You shouldn't get any results. Remove the Polymer.dom, and you do.

In summary:

#1 says, "Find a paper-toolbar in the main document, respecting (simulated) shadow DOM scoping."

#2 is effectively, "Find a paper-toolbar in the main document, ignoring (simulated) shadow DOM scoping."

So if you want to avoid picking up a deep shadow DOM child by accident, use #1. If it doesn't make a difference, as Eric said, you can use #2. 

Arthur