Web Components 在 IE11 和 Edge 中真的可用吗？

Question

Web 组件是热门的新事物，是真正的 Web 标准，每个人都在谈论它们并且大概都在使用它们，它们似乎是解决我们遇到的问题（跨不同站点共享组件）的完美解决方案。

所以我们构建了几个网络组件。在 Chrome 中工作正常，但在 IE11 中不行。也许使用 polyfill？ https://www.webcomponents.org/polyfills 有大量的 polyfill，但 IE11 一直抱怨 class。

也许编译成 ES5？各种消息来源声称 Web 组件需要 ES6，因为您无法从 IE11 中的 HTMLElement 获得相同类型的继承。有 custom-elements-es5-adapter.js，但不知何故它不起作用。如果我编译下来，webcomponents 不工作。如果我不这样做，IE11 将在 class.

上失败

然而每个人都在使用网络组件。你怎么做呢？你根本不支持IE11/Edge吗？我做错了什么吗？

Answer 1

如果您只需要自定义元素，那么您可以让它们与 IE11 和 Edge 一起使用。 Shadow DOM 和 HTML Imports 也可以与 IE11 和 Edge 一起使用，但我个人不喜欢使用 Shadow DOM，除非在本机支持它的浏览器上。

Firefox 和 Edge 将只使用常规的 polyfill。

IE11 需要编译成 ES5 并使用 polyfill。

If you are using the ES5 transpiled code on a newer browser, that supports class then you need to use the file custom-elements-es5-adapter.js

有些人使用 webcomponents-lite.js，它会自动加载所需的 polyfill 文件。其他加载特定的 polyfill，例如 webcomponents-hi-ce.js（HTML 导入和自定义元素）或 webcomponents-sd-ce.js（Shady DOM 和自定义元素）

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

更新

如果您使用的是较新版本的 Edge，即使用 Chromium 的版本，那么现在内置了对 V1 组件的支持。