如何将第三方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的元素，并在元素内部分配一个槽应该使它可以从文档中访问，但是在元素内部呈现。