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

Question

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

但是当我将代码转译回 ES5（使用 BabelJS）时，我运行变成了一个关于 ES5 'classes' 扩展原生元素的已知问题（https://github.com/babel/babel/issues/4480).

我尝试了 babel-plugin-transform-custom-element-类但没有用。 所以我尝试了 webcomponents shim 来解决这个问题： 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构造'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

我遇到了类似的问题，我找到了适合我的解决方案。

免责声明：我不使用应用程序-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 不工作

Why is wecomponentsjs/custom-elements-es5-adapter.js not working

javascript

polymer

custom-element

babeljs

polymer-2.x