0

I'm trying to consume a custom web component built with Polymer CLI in my webapp. I went though the following steps in order to setup a first dummy custom element with polymer:

using node v8.9.1, npm v5.5.1, polymer-cli v1.7.2

  1. mkdir my-custom-element && cd my-custom-element
  2. polymer init polymer-3-element
  3. polymer serve

The demo app under http://localhost:8000/demo/ generated by polymer serve imports my custom element and is cross-browser compatible. Specifically it loads the custom element in IE 11 - which is a requirement in my project.

My question is: How can I bootstrap my webapp index.html to use my custom element (that may be hosted on another server) just like in the demo app. I didn't yet find documentation on this.

For Polymer Elements e.g. there is documentation under https://elements.polymer-project.org/guides/using-elements#using-elements on how to bootstrap. Unfortunately this does not work with Polymer 3.0 elements (e.g. b/c of module imports vs. html imports).

4

1 回答 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

于 2018-05-30T11:23:14.890 回答