Как использовать jQuery плагины в элементах Polymer?

Question

[Станислав Ким]

К примеру хочу создать элемент. Этот элемент - слайдер, использующий jquery-плагин Swiper.

Так выглядит элемент.

<link rel="import" href="../bower_components/polymer/polymer.html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../bower_components/swiper/dist/idangerous.swiper.min.js"></script>
<polymer-element name="my-element">
	<template>
		<link rel="stylesheet" href="../bower_components/swiper/dist/idangerous.swiper.css">
		<div class="swiper-container">
  			<div class="swiper-wrapper">
      			<!--First Slide-->
      			<div class="swiper-slide"> 
      			  <!-- Any HTML content of the first slide goes here -->
      			  <h1>First Slide</h1>
      			</div>
      
      			<!--Second Slide-->
      			<div class="swiper-slide">
      			  <!-- Any HTML content of the second slide goes here -->
      			  <h1>Second Slide</h1>
      			</div>
      
      			<!--Third Slide-->
      			<div class="swiper-slide"> 
       			 <!-- Any HTML content of the third slide goes here -->
      			  <h1>Third Slide</h1>
      			</div>
      			<!--Etc..-->
  			</div>
		</div>

	</template>

	<script>
		Polymer('my-element',{});
	</script>

</polymer-element>

Для запуска слайдера необходимо запустить скрипт.

$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

При попытке просто вставить этот скрипт, ничего не срабатывает. А если переписываю под Polymer, то выдает ошибку, что метода "swiper" не существует.
Я так понимаю проблема в Shadow Dom. Но что-то ничего не лезет в голову умного для решения проблемы.

Answer 1

[vix]

Polymer('my-elemen', {
  ready: function () {
    this.swiperContainer = this.shadowRoot.querySelector('swiper-container');
  },
  domReady: function () {
    $(this.swiperContainer).swiper({
      mode:'horizontal',
      loop: true
    });
  }
}

Comments

[Станислав Ким]

а не подскажете, как реализовать доступ к shadow dom извне. Например мне нужен элемент, содержащий кнопку. Этот элемент я добавляю на страничку другую, на которой стоит счётчик нажатий. Js не видит элементы в shadow dom. Как быть?

[vix]

<polymer-element name="my-element" attributes="button">
  <template>
    <button type="button">Button 1</button>
    <button type="button" id="button2">Button 2</button>
  </template>
  <script>
    Polymer('my-element', {
      ready: function () {
        this.button = this.shadowRoot.querySelector('button');
      }
    });
  </script>
</polymer-element>
...
    var el = document.createElement('my-element');
    el.button.addEventListener('click', function (event) {
      console.log('click my-element.button 1');
    });
    el.$.button2.addEventListener('click', function (event) {
      console.log('click my-element.button 2');
    });
    document.body.appendChild(el);

[Станислав Ким]

скрипт, который вы указали внизу поместил на основную страницу.
Uncaught TypeError: Cannot read property 'addEventListener' of undefined (anonymous function)

[vix]

window.addEventListener('polymer-ready', function (e) {
    console.log('polymer-ready');

    var el = document.createElement('my-element');
    el.button.addEventListener('click', function (event) {
      console.log('click my-element.button 1');
    });
    el.$.button2.addEventListener('click', function (event) {
      console.log('click my-element.button 2');
    });
    document.body.appendChild(el);

  });