首页 文章

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

提问于
浏览 次
0

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

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

  • mkdir my-custom-element && cd my-custom-element
    聚合物引发聚合物-3-元素

  • 聚合物服务

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

我的问题是：我如何引导我的 webapp index.html使用我的自定义元素（可能托管在另一台服务器上），就像在演示应用程序中一样 . 我还没有找到关于此的文档 .

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

polymer web-component custom-element polymer-elements

1 回答

  • 1

    我认为最好的方法是从以下聚合物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",

    聚合物服务也使用它，并将引导自定义元素 .

    但是，由于跨浏览器兼容性问题，目前这还不够 . 我必须编写额外的引导代码才能在Chrome 65，FF 59和IE 11中使用它们，你可以在这里找到：https://github.com/robertfoobar/es6-custom-element

    回复于

相关问题