polymer slideToggle() function is reached, but no result

Question

Here I present a simplified version of my issue. The jQuery(3.2.1) slideToggle() function does not slide up or down at all in my case. However, the console does print the line above the slideToggle() function in the on-click event,indicating the on-click event is triggered. The function is inside a Polymer element class.

The

console.log('triggered');

does print to the console.

Code:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="cm-body">
 <template>

  <div id="container">
    <div on-click="performSlideToggle" >test</div>
    <p>blabla test</p>
  </div>
 </template>
 <script>

 /**
  * @customElement
  * @polymer
  */
 class CmBody extends Polymer.Element {
   static get is() { return 'cm-body'; }

   performSlideToggle() {
     console.log('triggered');
     $('p').slideToggle();
   }
 }

 window.customElements.define(CmBody.is, CmBody);
 </script>
</dom-module>

Thank you for your help!

Answer 1

you are using polymer2. By default this uses shadowDOM. Unfortunately jQuery cannot access an element in the shadowDOM. you could add an id to the particular element you want to slide and then select it using polymer.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="cm-body">
 <template>

  <div id="container">
    <div on-click="performSlideToggle" >test</div>
    <p id="slide_able">blabla test</p>
  </div>
 </template>
 <script>

 /**
  * @customElement
  * @polymer
  */
 class CmBody extends Polymer.Element {
   static get is() { return 'cm-body'; }

   performSlideToggle() {
     console.log('triggered');
     $(this.$.slide_able).slideToggle();
   }
 }

 window.customElements.define(CmBody.is, CmBody);
 </script>
</dom-module>