外部jsファイルでポリマーを使用する

Question

ポリマー要素にtrumbowyg.jsを使用したいと思っています。これにはjquery.jsとtrumbowyg.jsが含まれています。 Firefoxではうまく動作しますが、Chromeではうまく動作しません。

エラーが発生する可能性があります。シャドードームのルックアップ/クロム分離です。 trumbowyg.jsが "this"を使用する場所でエラーが発生します。

ここで何が問題になりますか？どうすれば違うのですか？

私はポリマー2.0

エラー使用しています：trumbowyg.html

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

このdoesntのは、働いているように見える

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

私-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> 

を jQuery plugins and Polymer elements

Answer 1

このプラグインは、おそらくネイティブのシャドーDOMでは動作しません。

おそらくtrumbowygがドキュメントを検索していくつかの要素を探すことを試みています。シャドウDOMはマークアップのカプセル化を作成しますので、シャドウルーツの内側のものを探すために$()またはdocument.querySelectorを使用することはできません。一般的には、この理由からShadow DOMの中でjQueryプラグインを使用しないことをお勧めします。