0

我有一个 litElement，我需要从另一个域中使用它。我的浏览器是 Chrome，我正在使用“polymer serve”并直接导航到 es5-bundle。

点亮元素非常简单。只是一些静态文本。

当我使用'polymer build'我的条目时，HTML 页面会被编译（或转换）。我看到'custom-elements-es5-adapter.js'添加了对的引用，以及其他自定义 JavaScript。当我导航到此条目页面（在构建文件夹中）时，一切正常。但是，如果我用原始未编译版本替换该编译版本，我会在 chrome 控制台中收到错误'define is not defined'.

最终我将从另一个域调用它，并且不会用聚合物构建 HTML。（我已经尝试过跨域但它不工作）

我需要在客户端中包含哪些内容才能使用聚合物发光元件？

这是我所拥有的：

<body>
    <my-element></my-element>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="./components/my-element.js" crossorigin=""?</script>
</body>
4

1 回答 1

1

lit-element 需要一个变换步骤。浏览器使用的文件必须进行转换。如果要部署原始源文件，则部署它们的 Web 服务器需要自己执行转换步骤（就像polymer serve这样做一样）。

来源：点燃元素自述文件：

LitElement 使用 JavaScript 模块在 npm 上发布。这意味着它可以利用当前所有主流浏览器中可用的标准原生 JavaScript 模块加载器。

但是，由于 LitElement 使用 npm 约定按名称引用依赖项，因此需要进行轻度转换以将说明符重写为 URL 以使其在浏览器中运行。polymer-cli 的开发服务器 polymerserve 自动处理这个转换。

WebPack 和 Rollup 等工具也可用于提供和/或捆绑 LitElement。

lit-element README有一个示例，该示例将在浏览器中运行而无需转换步骤。该示例将 lit-element 库作为模块从 unpkg 加载，如下所示：

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
  class MyElement extends LitElement {

  ...
</script>
<my-element></my-element>

如果您想尝试减少麻烦的 lit-element，该方法很有用，但 Polymer 团队不建议在生产中这样做；AFAIK unpkg 不保证正常运行时间或性能。

于 2018-09-14T20:49:33.993 回答