如何消耗聚合物点燃元件？-Java 学习之路

我有一个litElement，我将需要从另一个域消费 . 我的浏览器是Chrome，我使用'聚合物服务'并直接导航到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>

1 回答

0
lit-element需要转换步骤 . 必须转换浏览器使用的文件 . 如果要部署原始源文件，则部署它们的Web服务器需要自己执行转换步骤（如_970085所述） .

来源：lit-element README：

LitElement使用JavaScript Modules在npm上发布 . 这意味着它可以利用所有当前主流浏览器中提供的标准本机JavaScript模块加载器 . 但是，由于LitElement使用npm约定按名称引用依赖项，因此需要使用轻量转换来重写URL的说明符，以使其在浏览器中运行 . 聚合物cli的开发服务器聚合物服务自动处理这种转变 . WebPack和Rollup等工具也可用于提供和/或捆绑LitElement .

lit-element README有一个示例，它将在没有转换步骤的浏览器中运行 . 该示例将lit元素库作为模块从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无法保证正常运行时间或性能 .
回复于 2024-05-05T12:37:56+08:00

如何消耗聚合物点燃元件？

1 回答

相关问题