Sayem Shafayet Sayem Shafayet - 1 year ago 98
jQuery Question

jQuery selection in polymer webcomponent

Well, out of the box, jQuery does not have support for selecting nodes inside webcomponent(s). (probably because

does not work for shadow DOM (nor it should, by definition)).

Our previous codebase was somewhat dependent on jQuery and many of the devs do not want to let go of the simplicity of
selection. So, I wrapped up this quick and dirty trick.

window.$$ = function (that, selector) {
return $(that.shadowRoot.querySelectorAll(selector));

Usage (inside a lifetime callback or whenever the
node can be accessed):

jqel = $$(this, '.myClass'); // this has reference to the host

The question is, is there a better way to go about this?

Answer Source

i have created a jquery-polymer plugin that has a lot of functions that may help you dealing with polymer shadow dom

to select any element inside a polymer element lets say

<my-button id='button1'></my-button>

first you need to get the button shadow root using




this will return the button shadow root as jquery object then you can select anything inside it for example

$("#button1").shadow().find("ul > li:first")

cheers ;)