从Typescript传输到ECMAScript 5的自定义元素v1在IE11下失败

我在将一个简单的web组件传输到ES5时遇到了麻烦。在chrome、Edge和Firefox下，它似乎运行得非常好，但是IE11在组件的构造函数中失败了，“自定义元素构造函数没有生成要升级的元素。”

更新 奥利弗·克鲁尔（Oliver Krull）在下文中的出色工作明确地将问题归咎于Typescript的编译器输出。有可能使它工作吗

原始源（在TypeScript中）：

导入“/AppDrawer.less”
类AppDrawer扩展HtmleElement{
打开{
返回此.hasAttribute（“打开”）；
}
设置为打开（val:boolean）{
val？this.setAttribute（“打开”）：this.removeAttribute（“打开”）；
}
禁用（）{
返回此.hasAttribute（“已禁用”）；
}
设置为禁用（val:boolean）{
val？this.setAttribute（“禁用”）：this.removeAttribute（“禁用”）；
}
静态get-ObservedAttribute（）{return[“open”]}；
构造函数（）{
超级（）；
}
connectedCallback（）{
此.addEventListener（“单击”，（）=>{
this.open=！this.open；
})
this.textContent=this.open？“open”：“CLOSED”；
}
属性更改回调（属性、旧值、新值）{
this.textContent=this.open？“open”：“CLOSED”；
}
}
customElements.define（“应用程序抽屉”，应用程序抽屉）

输出（

bundle.js

）：

（函数（）{
"严格使用",；
函数_u$styleInject（css）{
如果（！css）返回；
if（typeof window=='undefined'）返回；
var style=document.createElement（'style'）；
style.setAttribute（'media'，'screen'）；
style.innerHTML=css；
document.head.appendChild（样式）；
返回css；
}
__$styleInject（“应用程序抽屉{\n颜色：红色；\n}\n”）；
函数uu扩展（d，b）{
如果（b.hasOwnProperty（p））d[p]=b[p]；
函数{this.constructor=d；}
d、 prototype=b==null？对象。创建（b）：（_uu.prototype=b.prototype，new_u（））；
}
var AppDrawer=（函数（_super）{
__扩展（AppDrawer，_super）；
函数AppDrawer（）{
_超级。打电话（这个）；
}
Object.defineProperty（AppDrawer.prototype，“打开”{
get:function（）{
返回此.hasAttribute（“打开”）；
},
设置：功能（val）{
val？this.setAttribute（“打开”）：this.removeAttribute（“打开”）；
},
可枚举：正确，
可配置：true
});
Object.defineProperty（AppDrawer.prototype，“已禁用”{
get:function（）{
返回此.hasAttribute（“已禁用”）；
},
设置：功能（val）{
val？this.setAttribute（“禁用”）：this.removeAttribute（“禁用”）；
},
可枚举：正确，
可配置：true
});
Object.defineProperty（AppDrawer，“ObservedAttribute”{
get:function（）{return[“open”]；}，
可枚举：正确，
可配置：true
});
AppDrawer.prototype.connectedCallback=函数（）{
var_this=这个；
此.addEventListener（“单击”），函数（）{
_this.open=！\u this.open；
});
this.textContent=this.open？“open”：“CLOSED”；
};
AppDrawer.prototype.attributeChangedCallback=函数（attr、oldVal、newVal）{
this.textContent=this.open？“open”：“CLOSED”；
};
退票人；
}（HTMLElement））；
自定义元素。定义（“应用程序抽屉”，应用程序抽屉）；
}());

和我的HTML：

为了跨浏览器工作，我们需要添加本机垫片（更多信息）

这在所有主流浏览器（edge、safari、firefox等）中都能很好地工作，但在ie11中却不行

当我们尝试在ie11中导入它时，会出现一系列语法错误，因为垫片是用一些es6编写的

一个简单的解决方法是将垫片编译到es5，并将其添加到es6版本之外（首先是es6，然后是es5以忽略错误）

这不是最干净的解决方案，但至少它是有效的

我创建了一个工作示例（您的应用程序抽屉（由于冲突而删除了

disabled

属性））

---

再说一次，它不是很干净，但很有效；-）

问题在于Typescript的ES5类实现与

custom-elements-v1

shim不兼容。显而易见的解决方案是配置TypeScript来生成ES6，并通过Babel进行传输

let rollupTs=rollupTypescript（需要（'./tsconfig.json'）。编译器选项）；
汇总({
条目：“src/client/main.ts”，
插件：[
滚动，
小于（{insert:true}），
解析（{module:true，jsnext:true，main:true}），
巴别塔({
预设：[
[es2015，{modules:false}]
],
插件：[“外部助手”]，
排除：“节点\模块/**”}）
],
dest:“bundle.js”，
格式：“iLife”
})

---

然而，请看接受的答案-似乎通过向typescript生成的代码添加es5 Transpile垫片，可以修复typescript的es5，而对babel编译代码没有影响。我接受了它，因为它是这个问题的一个相当小的修复程序，但需要注意的是我并不真正理解它为什么工作

@mseddon我现在在办公室，我今天晚上会看它（CEST，UTC+2）@mseddon Ok我拿了用es6编写的本机垫片，并将其编译成es5+捆绑，如果我在ie11中导入它，那么就不会再有错误，并且会触发connectedCallback，我现在面临的问题是，单击侦听器不工作，但是文本内容已经设置好了。你想让我以某种方式把文件寄给你吗？所以你可以用它做更多的试验？抱歉，我还没有完整的解决方案；-）没有那么多时间。@mseddon它起作用了，事件列表的问题