Les composants Web sont-ils réellement utilisables dans IE11 et Edge?
Les composants Web sont la nouvelle nouveauté, et un véritable standard Web, tout le monde en parle et les utilise probablement, et ils semblaient être la solution parfaite à un problème que nous avons (partager des composants sur des sites très différents).
Nous construisons donc quelques composants Web. Le travail fonctionne bien dans Chrome, mais pas dans IE11. Peut-être utiliser des polyfills? https://www.webcomponents.org/polyfills a une tonne de polyfills, mais IE11 continue de se plaindre de class.
Compiler jusqu'à ES5 peut-être? Diverses sources affirment que les composants Web nécessitent ES6, car vous n'obtenez pas le même type d'héritage de HTMLElement dans IE11. Il y a custom-elements-es5-adapter.js, mais cela ne fonctionne pas. Si je compile, les composants Web ne fonctionnent pas. Sinon, IE11 échoue sur class.
Et pourtant, tout le monde utilise des composants Web. Comment faites-vous? Ne supportez-vous pas du tout IE11/Edge? Est-ce que je fais quelque chose de mal?
Si vous ne voulez que des éléments personnalisés, vous pouvez les faire fonctionner avec IE11 et Edge. Shadow DOM et HTML Imports peuvent également fonctionner avec IE11 et Edge, mais personnellement, je n'aime pas utiliser Shadow DOM sauf sur les navigateurs qui le prennent en charge de manière native.
Firefox et Edge ne fonctionneront qu'avec le polyfill normal.
IE11 doit être transposé en ES5 et utiliser le polyfill.
Si vous utilisez le code transpilé ES5 sur un navigateur plus récent, qui prend en charge
class, vous devez utiliser le fichiercustom-elements-es5-adapter.js
Certaines personnes utilisent webcomponents-lite.js qui chargera automatiquement les fichiers polyfill nécessaires. D'autres chargent le polyfill spécifique, comme webcomponents-hi-ce.js (Importations HTML et éléments personnalisés) ou webcomponents-sd-ce.js (DOM ombragé et éléments personnalisés)