CODEWITHSUNDEEP
polymerpolymer-2.xtrumbowyg
Dheeraj Sarwaiya
Dheeraj Sarwaiya

Reputation: 163

Using polymer with external js files

I want to use trumbowyg.js in my polymer element, it includes jquery.js and trumbowyg.js. It works fine in Firefox but not in chrome.

It gives error, may be because shadow dom lookup/separation in chrome. The error happens where ever trumbowyg.js uses "this".

Whats going wrong here? What should I do differently?

I am using Polymer 2.0

error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at trumbowyg.js:1544

my-notes.html 

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

    <dom-module id="my-notes">
    <template>

    <link rel="stylesheet" href="../bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
  <firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth>
          <div class="card">
              <div id="trumbowygd">hello</div>
          </div>

         </template>
         <script>
    class MyNotes extends Polymer.Element {

      static get is() { return 'my-notes'; }
static get properties() {
        return {

          user: {
            type: Object,
            observer: '_shownotearea'
          },
        };
      }


      _shownotearea(){
        var myFineElement = this.$.trumbowygd;
        myFineElement.innerHTML="hello nice meeting you";
                 $(myFineElement).trumbowyg({});

      }
</script>

    </dom-module>

trumbowyg.html

<script src="../jquery/dist/jquery.min.js"></script>
<script src="dist/trumbowyg.js"></script>

This doesnt seem to be working jQuery plugins and Polymer elements

Upvotes: 1

Views: 591

Answers (1)

robdodson
robdodson

Reputation: 6786

The short answer is this plugin probably won't work with native Shadow DOM.

Likely trumbowyg is trying to query the document to look for some element. Shadow DOM creates markup encapsulation so you can't use $() or document.querySelector to look for things inside of shadow roots. In general I recommend not using jQuery plugins inside of Shadow DOM for this reason.

Upvotes: 1

Related Questions