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

我将Polymer应用程序转换为Polymer 2.我将组件更改为ES6 Class语法（是的，我知道我可以将它们留在v1.7中混合风格，但我希望他们是ES6类）。为什么wecomponentsjs/custom-elements-es5-adapter.js不起作用

然而当我transpile代码回到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

通知我，包括自定义元素-ES5-adapter.js，也注意到JS的面板使用ES6 /巴贝尔。

如果您删除自定义元素-ES5-adapter.js和改变JS面板正常使用Javascript（不ES6 /巴贝尔），那么一切工作正常。

你可以包括或删除t他的适配器（离开ES6/Babel）和错误基本上是一样的，除了包含适配器时，它来自适配器代码：未能构建'HTMLElement'：请使用'new'运算符，这个DOM对象构造函数不能作为函数调用。

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

来源

2017-04-07 devlop

嗯，我在做一些愚蠢的事情。我应该尝试升级我的Babel软件包。

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

来源

2017-04-08 15:01:45 devlop

我被困在同一个问题。

这个问题是由于我的构建链（gulp）转译了项目的每个js文件。但是custom-elements-es5-adapter.js文件不能被转译成工作。转储一切，但这个文件。

来源

2017-06-29 19:44:18

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

声明：我不使用应用程序外壳，因为我有一个服务器端渲染站点，只有客户端上的一些孤立的聚合物组件。

经过紧张的调试问题归结为一个事实，即我是包括这个块（聚合物的建议指南）：

<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内的编译器，他们不会找到这个文件，因此他们不会将其包含在构建中。

我希望它有帮助！

来源

2017-07-10 02:14:14

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

回答

相关问题