定义 Polymer Web 组件而不导入它们

Posted 2023-02-23

【中文标题】定义 Polymer Web 组件而不导入它们

【英文标题】：Defining Polymer web components without importing them

【发布时间】：2018-10-22 10:19:58

【问题描述】：

有没有办法直接在 html 文件中为使用它们的页面定义 Polymer Web 组件，而不是通过链接标签导入它们？

这似乎比必须请求页面然后发送对 Web 组件 html 文件的请求更快。到目前为止，我看到的所有指南都仅参考通过 <link rel="import" href="/my_component.html" /> 导入。

【参考方案1】：

您可以使用 Polymer Bundler 减少将 Web 组件和依赖项连接到一个文件中的网络请求数量。您可以找到更多信息here。

【参考方案2】：

正如另一个答案中所建议的，这似乎是一种更好的方法，可以在开发时更多地担心文件/元素的清晰结构，并让构建脚本担心类似的事情。

但是由于捆绑器基本上会做同样的事情，定义文件中的所有元素，这显然是可能的。所以只回答最初的问题，你可以看到一个样本here。

所以你只需要使用多个dom-module 标签，例如：

<dom-module id="my-element">
...
</dom-module>
<dom-module id="my-inner-element">
...
</dom-module>

并多次调用customElements.define：

customElements.define(MyElement.is, MyElement);
customElements.define(MyInnerElement.is, MyInnerElement);

但我肯定会建议不要将整个应用程序编写在一个文件中。