首页 文章

为什么wecomponentsjs / custom-elements-es5-adapter.js无效

提问于
浏览 次
0

我将Polymer应用程序转换为Polymer 2.我将我的组件更改为ES6 Class语法（是的，我知道我可以将它们保留为v1.7混合风格，但我希望它们是ES6类） .

However 当我将代码转换回ES5（使用BabelJS）时，我遇到了一个关于ES5 'classes'扩展原生元素（https://github.com/babel/babel/issues/4480）的已知问题 .

我尝试过babel-plugin-transform-custom-element-classes，但是没有用 . So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs

但是垫片不起作用！我不知道我做错了什么:(

<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
  /* transpiled to ES5 */
  class YExample extends HTMLElement {}
  customElements.define('y-example', YExample);
</script>

这是我的jsbin：http://jsbin.com/feqoniz/edit?html,js,output

请注意我包含了custom-elements-es5-adapter.js，还注意到JS面板正在使用ES6 / Babel .

如果你删除custom-elements-es5-adapter.js并将JS面板更改为普通的Javascript（不是ES6 / Babel），那么一切正常 .

您可以包含或删除适配器（保留ES6 / Babel），错误基本相同，只是当包含适配器时，它来自适配器代码： Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

我一定是在做些傻事？有任何想法吗？

javascript polymer babeljs custom-element polymer-2.x

3 回答

  • 0

    我被困在同样的问题上 .

    问题是由于我的构建链（gulp）转换了项目的每个js文件 . 但是custom-elements-es5-adapter.js文件 must not 被转换为工作 . 透明除此文件之外的所有内容 .

    回复于
  • 0

    好吧，我做的事情很傻 . 我应该尝试升级我的Babel包 .

    将BabelJS从6.23.1升级到最新的6.24.1并修复了问题 . ：P

    回复于
  • 1

    我遇到了类似的问题，我发现了一个适合我的解决方案 .

    免责声明：我不使用app-shell，因为我有一个服务器端渲染的站点，客户端只有几个隔离的Polymer组件 .

    经过紧张的调试后，问题归结为我包含了这个块（正如Polymer指南中所建议的那样）：

    <div id="autogenerated-ce-es5-shim">
  <script type="text/javascript">
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
      ceShimContainer.parentElement.removeChild(ceShimContainer);
    }
  </script>
  <script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>

    因为当我跑 polymer build 时它会从那里拿起 custom-elements-es5-adapter.js .

    这就是我所做的：

    <script type="text/javascript">
if (window.customElements) {
   document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>

    是的's not as elegant and quite rustic but, hey, it works! Here I' m欺骗 polymer build 中的编译器，他们赢了't find this file and hence they won' t包含在构建中 .

    我希望它有所帮助！

    回复于

相关问题