LitElement 加载外部脚本

【问题标题】：LitElement load external scriptLitElement 加载外部脚本
【发布时间】：2019-04-15 10:07:23
【问题描述】：

我试图简单地将它加载到我呈现的 HTML 中，但这不起作用。

当前代码：

render() {
    return html `<script @onload="${this.mapKitLoadedCallback}" src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>`;
}

【问题讨论】：

标签： web-component lit-element polymer-3.x

【解决方案1】：

从聚合物松弛渠道获得了解决方案（归功于 westbrook）：

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  script() {
    let script = document.createElement('script');
    script.onload = this.onLoad.bind(this);
    script.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js';
    return script;
  }
  onLoad() {
    alert('loaded');
  }
  render() {
    return html`
      <p>Hello world! From my-element</p>
      ${this.script()}
    `;
  }
}

customElements.define('my-element', MyElement);

【讨论】：