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

【问题标题】：Why is wecomponentsjs/custom-elements-es5-adapter.js not working为什么 wecomponentsjs/custom-elements-es5-adapter.js 不工作
【发布时间】：2017-04-07 21:15:14
【问题描述】：

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

但是当我将代码转译回 ES5（使用 BabelJS）时，我遇到了一个关于 ES5“类”扩展本机元素的已知问题 (https://github.com/babel/babel/issues/4480)。

我尝试了 babel-plugin-transform-custom-element-classes 但没有奏效。 所以我尝试了旨在解决此问题的 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），错误基本上是一样的，除了当包含适配器时，它来自适配器代码：无法构造“HTMLElement”：请使用'new'操作符，这个DOM对象构造函数不能作为函数调用。

我一定是在做一些傻事吗？有什么想法吗？

【问题讨论】：

标签： javascript polymer babeljs custom-element polymer-2.x

【解决方案1】：

好吧，我在做一些傻事。我应该尝试升级我的 Babel 包。

将 BabelJS 从 6.23.1 升级到最新的 6.24.1 并解决了问题。 :P

【讨论】：

【解决方案2】：

我遇到了同样的问题。

问题是由于我的构建链 (gulp) 转译了项目的每个 js 文件。但 custom-elements-es5-adapter.js 文件不得转译为工作。转译除此文件之外的所有内容。

【讨论】：

【解决方案3】：

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

免责声明：我不使用 app-shell，因为我有一个服务器端呈现的站点，在客户端只有几个孤立的 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 中的编译器，他们找不到这个文件，因此他们不会将它包含在构建中。

希望对你有帮助！

【讨论】：