CODEWITHSUNDEEP
jquerypolymerweb-componentshadow-dom
cking
cking

Reputation: 31

Accessing the Polymer created DOM with JQuery

I'm new to working with Polymer and I'm trying to access the DOM of a new custom element through jQuery but without success.

I'm trying to access the elements through the domReady method, when the elements initial set of children are guaranteed to exist.

Any help is very much appreciated!

Custom Element: 

<template>

    <link rel="stylesheet" href="seed-element.css" />
    <style>
        .hero-slider { max-width: 1440px; }
    </style>

    <content>

        <section class="hero-slider">
            <div class="iosSlider">        
              <div class="slider">

                 <div class="item">
                     <img src="img/imageTest1.jpg" alt="IMAGE TEST 1">
                 </div>
                 <div class="item">
                   <img src="img/imageTest5.jpg" alt="IMAGE TEST 5">
                 </div>

              </div>
           </div>
      </section>

    </content>

</template>

<script>

Polymer('seed-element', {

    domReady: function() {
    var shadowRoot = $(this.shadowRoot || this);
    var iosSliderElement = shadowRoot.find('.iosSlider');

    iosSliderElement.iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        keyboardControls: true,
        scrollbar: true,
        scrollbarDrag: true,
        scrollbarHide: false,
        scrollbarLocation: 'bottom',
        scrollbarBackground: '#000000',
        scrollbarOpacity: '1',
        scrollbarBorderRadius: '0'
    });
    }
});

</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.iosslider.js"></script>

HTML:

<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>seed-element Demo</title>
    <script src="../../platform/platform.js"></script>
    <link rel="import" href="seed-element.html">
</head>
<body unresolved>
    <seed-element></seed-element>
</body>

Upvotes: 3

Views: 3221

Answers (2)

Fareed Alnamrouti
Fareed Alnamrouti

Reputation: 32154

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

https://github.com/digital-flowers/jquery-polymer

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

$("#button1").getShadowRoot()

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

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

also in your example you can use it inside your polymer component for example

$(this).getShadowRoot().find("li:first")

Note that this plugin and another plugin called jquery-ui-polymer fixes a lot of jquery and jquery ui compatibility issues with polymer project

https://github.com/digital-flowers/jquery-polymer

https://github.com/digital-flowers/jquery-ui-polymer

cheers ;)

Upvotes: 0

Peter Burns
Peter Burns

Reputation: 45331

The quick solution to your problem is likely something like this:

Polymer('seed-element', {

  domReady: function() {
    var shadowRoot = this.shadowRoot || this;
    var iosSliderElement = $(shadowRoot.querySelector('.iosSlider'));

    iosSliderElement.iosSlider({
      snapToChildren: true,
      desktopClickDrag: true,
      keyboardControls: true,
      scrollbar: true,
      scrollbarDrag: true,
      scrollbarHide: false,
      scrollbarLocation: 'bottom',
      scrollbarBackground: '#000000',
      scrollbarOpacity: '1',
      scrollbarBorderRadius: '0'
    });
  }
});

A jsbin that doesn't use the for-pay iosSlider library: http://jsbin.com/foyodevu/2/edit

You see, domReady is called for each <seed-element> in your page, once that element has been inserted into the DOM and it's ready for you to interact with its children, so you shouldn't look for every seed-element within domReady because you probably only care about this, which is your newly created seed-element.

A couple other notes

  • $((this.shadowRoot || this).querySelector('.iosSlider')) is a good way of querying a Polymer element's Shadow DOM. Another option is to give the element an id, then you could do this.$.theElementsId.
  • In your example code above you use a <content> node. Note that that element type has special meaning within a shadow dom and is probably not what you want. <content> nodes allow the users of a web component to mix the light dom and shadow dom. For more information, see this article: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation-separate
  • I'd recommend a name that's more like projectName-elementDescription like paper-input. Maybe jquery-iosslider?

Upvotes: 1

Related Questions