I 将聚合物应用程序转换为聚合物 2。我正在将我的组件更改为 ES6 类语法(是的，我知道我可以将它们保留为 v1.7 混合样式，但我希望它们是 ES6 类)。
但是，当我将代码转写回 ES5(使用 BabelJS)时，我遇到了有关扩展本机元素 (https://github.com/babel/babel/issues/4480) 的 ES5"类"的已知问题。
我尝试了 babel-plugin-transform-custom-element-class，但这不起作用。所以我尝试了旨在解决此问题的网络组件填充程序：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
请注意，我包括自定义元素-es5-adapter.js， 另请注意，JS面板使用的是ES6/Babel。
如果您删除自定义元素-es5-adapter.js并将JS面板更改为普通的Javascript(不是ES6/Babel)，那么一切正常。
您可以包含或删除适配器(保留 ES6/Babel)，错误基本上是相同的，只是当包含适配器时，它来自适配器代码： 无法构造">HTMLElement"：请使用"new"运算符，此 DOM 对象构造函数不能作为函数调用。
我一定在做傻事吧？有什么想法吗？
好吧，我在做一些愚蠢的事情。我应该尝试升级我的 Babel 软件包。
将 BabelJS 从 6.23.1 升级到最新的 6.24.1 并修复了该问题。 :P
我遇到了同样的问题。
问题是由于我的构建链(gulp)转译了项目的每个js文件。但是自定义元素-es5-adapter.js 文件不得转译为工作。转译除此文件以外的所有内容。
我遇到了类似的问题，我找到了适合我的解决方案。
免责声明：我不使用 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内部的编译器，他们找不到这个文件，因此他们不会将其包含在构建中。
我希望它有所帮助！