现在，如果您严格遵循自定义元素规范 v1 https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements，无法在不支持类的浏览器中使用自定义元素。
有没有办法创建 v1 自定义元素without使用类语法，以便它们在 Chrome、FireFox 和 IE11 中功能齐全。另外，由于 IE11 没有对自定义元素的本机支持，我假设我们可能需要使用一些 pollyfill，那么我们需要哪些 polyfill 或库才能在 IE11 中实现此功能？
我尝试过使用 Polymer 2、Polymer 3 和 Stencil，但对于我们想要创建的一些东西来说，它们都有点繁重。
这个问题 https://stackoverflow.com/questions/46071707/creating-custom-element-without-using-class-keyword似乎走在正确的轨道上，但我在让它在 IE11 中工作时遇到了一些麻烦，那么我如何在 IE11 中使用 Reflect.construct 来实现自定义元素呢？
这是使用 v1 规范编写与 ES5 兼容的自定义元素的完整示例（归功于github上的这条评论 https://github.com/w3c/webcomponents/issues/587#issuecomment-378684197)
<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>
另外，对于 Typescript 爱好者来说，这里有一种使用 TypeScript 编写自定义元素的方法，该方法在编译为 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
