使用来自另一个 webapp 的 Polymer 3.0 自定义元素

Question

我正在尝试在我的 webapp 中使用使用 Polymer CLI 构建的自定义 Web 组件。我执行了以下步骤以使用聚合物设置第一个虚拟自定义元素：

使用节点 v8.9.1、npm v5.5.1、polymer-cli v1.7.2

mkdir 我的自定义元素 && cd 我的自定义元素
聚合物初始聚合物-3-元素
聚合物发球

http://localhost:8000/demo/ 下的演示应用程序由 polymer serve 生成，导入我的自定义元素并且跨浏览器兼容。具体来说，它会在 IE 11 中加载自定义元素 - 这是我项目中的要求。

我的问题是：我如何 bootstrap 我的 webapp index.html 使用我的自定义元素（可能托管在另一台服务器上）就像在演示应用程序中。我还没有找到这方面的文件。

对于聚合物元件，例如https://elements.polymer-project.org/guides/using-elements#using-elements 下有关于如何 bootstrap 的文档。不幸的是，这不适用于 Polymer 3.0 元素（例如 b/c 模块导入与 html 导入）。

Answer 1

我认为最好的方法是以下摘自 polymer init 生成的 demo/index.html:

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <script type="text/javascript" src="assets/webcomponents-loader.js">/script>
   <script type="module" src="http://localhost:8000/custom-polymer-element.js"></script>
 </head>
 <body>
   <custom-polymer-element></custom-polymer-element>
 </body>
</html>

来自 https://github.com/webcomponents/webcomponentsjs / npm 包的 webcomponents-loader.js：

"@webcomponents/webcomponentsjs": "^2.0.0",

也被 polymer serve 使用，并将 bootstrap 自定义元素。

但是，由于跨浏览器兼容性问题，目前这还不够。我必须编写额外的 bootstrapping 代码才能使其在 Chrome 65+、FF 59+ 和 IE 11 中工作，您可以在此处找到：https://github.com/robertfoobar/es6-custom-element

使用来自另一个 webapp 的 Polymer 3.0 自定义元素

Usage of Polymer 3.0 custom element from another webapp

polymer

web-component

custom-element

polymer-elements