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

罗伯特

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

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

  1. mkdir my-custom-element && cd my-custom-element
  2. 聚合物 init 聚合物-3-元素
  3. 聚合物服务

聚合物服务生成的http://localhost:8000/demo/下的演示应用程序导入了我的自定义元素,并且是跨浏览器兼容的。具体来说,它会在 IE 11 中加载自定义元素——这是我项目中的要求。

我的问题是:如何引导我的webapp index.html 以使用我的自定义元素(可能托管在另一台服务器上),就像在演示应用程序中一样。我还没有找到这方面的文档。

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

罗伯特

我认为最好的方法是从聚合物初始化生成的演示/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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

创建一个自定义的Polymer元素

如何发布Polymer 3.x自定义元素?

使用Owl Carousel作为Polymer的自定义元素的问题

使用未发布的Polymer2自定义元素

对HtmlService Webapp使用自定义URL

如何使用外部样式设置自定义Polymer元素的内部元素的样式?

无法使用Javascript访问Polymer自定义元素中的Canvas元素

使用来自另一个工作表的引用重新排列自定义列

InterestRate返回0,我使用的引用来自另一个Form

我可以在自定义Polymer元素中使用jquery吗?

使用Polymer.dart从动态添加的自定义元素内部操作阴影DOM

如何隐藏自定义的Polymer元素?

jQuery:使用来自另一个元素的文本创建元素

自定义HTML元素扩展了另一个自定义元素

使用来自另一个元素的选择器定位一个元素

在vue webapp中使用引导程序:如何自定义

试图将一个Polymer元素附加到另一个Polymer元素中

尝试在Heroku上使用来自另一个提供商的自定义域(names.co.uk)设置NextJS网站

使用来自另一个账户 s3 存储桶的代码源部署 Lambda

Transcrypt:使用来自另一个python脚本的代码导致“ TypeError:模块未定义”

在Julia中使用自定义比例[0π/ 2π3π/ 22π]进行绘制

如何从回调访问Polymer自定义元素

如何传递Polymer Object beetwen 2自定义元素

Polymer自定义元素阴影DOM问题

在嵌套的Polymer自定义元素中访问JavaScript方法

通过拖放将自定义元素的对象引用传递给另一个自定义元素

如何使用嵌套组件创建和样式化3个自定义元素?

指向另一个元素的href在Polymer中不起作用

如何将自定义 ObservableCollection 元素复制到另一个自定义 ObservableCollection?