将聚合物与外部JS文件一起使用

Question

我想在我的聚合物元素中使用trumbowyg.js，其中包括jquery.js和trumbowyg.js。它在Firefox中工作正常，但在Chrome中效果不佳。

它给出了错误，可能是因为chrome中的阴影dom查找/分离。错误发生在trumbowyg.js使用" this"的地方。

这里怎么了？我应该做什么不同？

我正在使用聚合物2.0

错误：

untureck typeerror：无法阅读未定义的属性'tolowercase' 在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>

这似乎不起作用jQuery插件和聚合物元素

Answer 1

简短的答案是，此插件可能无法与本机shadow dom一起使用。

很可能Trumbowyg试图查询文档以寻找某些元素。Shadow dom创建标记封装，因此您不能使用$()或document.querySelector来寻找阴影根部内的事物。通常，我建议不要在Shadow dom内部使用jQuery插件。