我正在尝试在我的webapp 中使用使用 Polymer CLI 构建的自定义 Web 组件。我通过以下步骤来设置第一个带有聚合物的虚拟自定义元素:
使用 node v8.9.1、npm v5.5.1、polymer-cli v1.7.2
聚合物服务生成的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] 删除。
我来说两句