如何将第三方js库（BoxCast）嵌入到Polymer 3.0中

Question

I'm trying to include the BoxCast JS API ( http://boxcast.github.io/boxcast_js_docs/examples/ ) into my polymer 3.0 web application as a third party library.

Ive managed to get the starter script / example from the above link running as a stand-alone html/js. But if I try to embed it in a Polymer Element the boxCast player fails with an Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLDivElement]' is not a valid selector error.

Basic html - loads the player successfully

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

Embedded in Polymer - doesn't work

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);

My assumption is that I do something wrong with passing the div -element to the boxcast-js - as also the error message implies, but I can't figure out how to solve this issue. Thanks in advance for your help.

Answer 1

Have you tried to use the es-6 way of importing libraries...

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

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

I'm not sure this will work but similar libraries like animejs, and jquery are updating to ES-6 and import similarly

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

and from looking at the changelog they just updated their get* methods to ES-6...

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

Answer 2

I don't know boxcast.

However, based on the first code :

boxcast('#testplayer').loadChannel

And the error returned in your polymer attempt, looks like boxcast method expects a string that allows it to locate the element that will be the base for it.

However, in the polymer version:

boxcast(this.$.testplayer)

You are using $.testplayer that is not a string, but already an element.

May be you can call directly loadChannel on this element

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

Failing that, you should see in the boxcast docs how to skip the first step (trying to locate the element)

Failing that, you could go along the first idea (call boxcast('#id') but the element should be probably in lightdom and not in shadowdom

Why is this the case ? - the message error states

Failed to execute 'querySelectorAll' on 'Document'

So the library is trying to find the element starting from document . Since the polymer element will be rendered in shadow-dom, it is not accesible from the root of the document.

Setting the element with the id testplayer outside of the polymer element, and the assigning it a slot inside the element should make it accesible from the document, but rendered inside the element.