Implémentation d'un moteur de rendu interne avec mise à jour optimisée

Scénario

Contexte : Un composant complexe met à jour son innerHTML à chaque modification d'état. Le Problème : Chaque mise à jour reconstruit entièrement le DOM interne, entraînant perte d'événements et performances dégradées. Contraintes : Utiliser Web Components natifs sans librairie de virtual DOM. Code actuel : class CounterBox extends HTMLElement { constructor() { super(); this.count = 0; } connectedCallback() { this.render(); } render() { this.innerHTML = `<button>+</button><p>${this.count}</p>`; } } customElements.define('counter-box', CounterBox); Livrable attendu : Refactoriser le composant pour éviter la reconstruction complète du DOM à chaque mise à jour et préserver les performances.

Compétences ciblées