Question

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

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

我尝试过babel-plugin-transform-custom-element-classes，但是没有用。 所以我尝试使用webcomponents垫片来解决此问题： 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），错误基本相同，只是当包含适配器时，它来自适配器代码：无法构造'HTMLElement'：请使用'new'运算符，此DOM对象构造函数不能作为函数调用。

我必须做些傻事吗？有什么想法吗？

Answer 1

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

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

Answer 2

我被同样的问题困扰了。

问题是由于我的构建链（gulp）转换了项目的每个js文件。但是必须将custom-elements-es5-adapter.js文件转换为才能生效。透明除此文件之外的所有内容。

Answer 3

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

免责声明：我没有使用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>

是的，它没有那么优雅和质朴但是，嘿，它有效！在这里，我在polymer build内欺骗编辑器，他们无法找到此文件，因此他们不会在构建中包含它。

我希望它有所帮助！

为什么wecomponentsjs / custom-elements-es5-adapter.js不起作用

3 个答案: