在ES5中创建自定义元素v1，而不是ES6 [英] Create custom elements v1 in ES5, not ES6
问题描述
目前，如果您遵循 v1的确切规格自定义元素规范，不能在不支持类的浏览器中使用自定义元素。
Right now, if you follow the exact specifications of v1 of the custom elements spec, it's not possible to use custom elements in browsers that don't support classes.
有没有办法创建v1自定义元素不使用使用类语法，以便它们在Chrome，FireFox和IE11中完全正常运行。此外，由于IE11没有自定义元素的原生支持，我假设我们可能需要使用一些pollyfill，那么我们需要哪些polyfill或库才能在IE11中使用它？
Is there a way to create v1 custom elements without using the class syntax so that they are fully functional in Chrome, FireFox and IE11. Also, since IE11 doesn't have native support for custom elements, I'm assuming we will probably need to use some pollyfills, so what polyfills or libraries do we need in order to make this work in IE11?
我已经弄乱了Polymer 2，Polymer 3和Stencil，但对于我们想要创建的一些东西来说，它们都有点重要。
I've messed around with Polymer 2, Polymer 3, and Stencil, but they are all a bit heavy-duty for some of the things we want to create.
这个问题似乎是在正确的轨道上，但我在IE11中工作时遇到了一些麻烦，那么我如何在IE11中使用Reflect.construct来实现自定义元素呢？
This question seems to be on the right track, but I had some trouble getting it to work in IE11, so also how can I use Reflect.construct in IE11 for the purposes of custom elements?
推荐答案
以下是使用v1规范编写与ES5兼容的自定义元素的完整示例（信用证这条关于github的评论）
Here's a full example of writing ES5-compatible custom elements using the v1 spec (credit to this comment on github)
<html>
<head>
<!--pollyfill Reflect for "older" browsers-->
<script src="https://cdn.rawgit.com/paulmillr/es6-shim/master/es6-shim.min.js"></script>
<!--pollyfill custom elements for "older" browsers-->
<script src="https://cdn.rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
<script type="text/javascript">
function MyEl() {
return Reflect.construct(HTMLElement, [], this.constructor);
}
MyEl.prototype = Object.create(HTMLElement.prototype);
MyEl.prototype.constructor = MyEl;
Object.setPrototypeOf(MyEl, HTMLElement);
MyEl.prototype.connectedCallback = function() {
this.innerHTML = 'Hello world';
};
customElements.define('my-el', MyEl);
</script>
</head>
<body>
<my-el></my-el>
</body>
</html>
此外，对于打字稿爱好者来说，这是一种使用打字稿编写自定义元素的方法，这些元素在编译为ES5时仍然有效。
Also, for the typescript lovers, here's a way to write custom elements using typescript that will still work when compiled to ES5.
<html>
<head>
<!--pollyfill Reflect for "older" browsers-->
<script src="https://cdn.rawgit.com/paulmillr/es6-shim/master/es6-shim.min.js"></script>
<!--pollyfill custom elements for "older" browsers-->
<script src="https://cdn.rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
<script type="text/typescript">
class MyEl extends HTMLElement{
constructor(){
return Reflect.construct(HTMLElement, [], this.constructor);
}
connectedCallback () {
this.innerHTML = 'Hello world';
}
}
customElements.define('my-el', MyEl);
</script>
</head>
<body>
<my-el></my-el>
<!-- include an in-browser typescript compiler just for this example -->
<script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
<script src="https://rawgit.com/basarat/typescript-script/master/transpiler.js"></script>
</body>
</html>
这篇关于在ES5中创建自定义元素v1，而不是ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
