Retour à la leçonMission
Mission : rendre carte-produit.js réutilisable sur 3 projets
Corriger un Web Component mal nommé et non isolé, destiné à être réutilisé sur trois projets aux CSS globaux différents.
Contexte
Une équipe frontend veut réutiliser le même composant "carte produit" sur trois projets (site vitrine, boutique, back-office admin), sans framework commun. Un premier essai échoue au chargement avec l'erreur Failed to execute 'define' on 'CustomElementRegistry', car le code appelait customElements.define("carteproduit", CarteProduit). Le back-office possède aussi une règle CSS globale button { color: red; } qui ne doit surtout pas affecter les boutons internes du composant.
Ta mission : corriger le nommage et isoler correctement le composant.