Encapsulation de style via Shadow DOM simple

Scénario

Contexte : Un composant bouton personnalisé entre en conflit avec les styles globaux du site. Le Problème : Les styles CSS globaux écrasent le design du bouton. Contraintes : Utiliser Shadow DOM natif pour encapsuler les styles. Aucun framework. Code actuel : class MyButton extends HTMLElement { connectedCallback() { this.innerHTML = `<button class="btn">Click</button>`; } } customElements.define('my-button', MyButton); Livrable attendu : Refactoriser le composant pour utiliser attachShadow et encapsuler ses styles.

Compétences ciblées