如何將第三方js庫（BoxCast）嵌入到Polymer 3.0中

Question

我正在嘗試將BoxCast JS API（ http://boxcast.github.io/boxcast_js_docs/examples/ ）作為第三方庫包含在我的聚合物3.0 Web應用程序中。

我設法從上面的鏈接獲得起始腳本/示例作為獨立的html / js運行。 但是如果我嘗試將它嵌入到Polymer Element中，則boxCast播放器會因Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement]' is not a valid selector錯誤。

基本html - 成功加載播放器

<div id="testplayer"></div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
boxcast('#testplayer').loadChannel('vgniwkahiegcflco2pq6', {
  autoplay: false,
  showTitle: true,
  showDescription: true
});
</script>

嵌入聚合物 - 不起作用

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

import 'https://js.boxcast.com/v3.min.js';

class AruBoxCastPlayer extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
      </style>
      <div id="testplayer">
        loading boxcast player
      </div> 
    `;
  }

  static get properties() {
    return {
    };
  }

  _loadBroadcast() {
    console.log("load broadcast");
    console.log('test node binding', this.$.testplayer.textContent);

    boxcast(this.$.testplayer).loadChannel('vgniwkahiegcflco2pq6', {
      autoplay: false,
      showTitle: true,
      showDescription: true
    });
  }

  ready() {
    super.ready();
    this._loadBroadcast();
  }
}

window.customElements.define('aru-boxcast-player', AruBoxCastPlayer);

我的假設是我將div -element傳遞給boxcast-js時出錯了 - 正如錯誤信息所暗示的那樣，但我無法弄清楚如何解決這個問題。 在此先感謝您的幫助。

Answer 1

您是否嘗試使用es-6導入庫的方式...

# First, install the SDK from NPM
npm install boxcast-sdk-js --save

# Then, in your javascript project:
import boxcast from 'boxcast-sdk-js';

我不確定這會有效但像animejs和jquery這樣的類似的庫正在更新到ES-6並導入類似的

// example
import anime from 'animjs';
import * as $ from 'jquery';

從查看更改日志，他們剛剛將他們的get *方法更新為ES-6 ...

http://boxcast.github.io/boxcast_js_docs/changelog/

Answer 2

我不知道boxcast。

但是，基於第一個代碼：

boxcast('#testplayer').loadChannel

並且在聚合物嘗試中返回的錯誤，看起來像boxcast方法需要一個字符串，允許它找到將作為它的基礎的元素。

但是，在聚合物版本中：

boxcast(this.$.testplayer)

您使用的$ .testplayer不是字符串，但已經是一個元素。

也許你可以在這個元素上直接調用loadChannel

this.$.testplayer.loadChannel (.....

如果不這樣做，你應該在boxcast docs中看到如何跳過第一步（試圖找到元素）

如果做不到這一點，你可以繼續第一個想法（調用boxcast（'＃id'），但元素可能應該在lightdom中，而不是在shadowdom中

為什么會這樣？ - 消息錯誤狀態

無法在'Document'上執行'querySelectorAll'

所以該庫正在嘗試從文檔開始查找元素。 由於聚合物元素將以陰影方式呈現，因此無法從文檔的根目錄訪問它。

在聚合物元素之外設置具有id testplayer的元素，並在元素內部分配一個槽應該使它可以從文檔中訪問，但是在元素內部呈現。