Synchronisation réactive d'attributs et propriétés dans un composant personnalisé

السيناريو

Contexte : Vous développez un composant <user-profile> utilisé dans plusieurs parties d'une application interne. Le Problème : Lorsque la propriété JavaScript est modifiée dynamiquement (element.name = "Alice"), le rendu ne se met pas à jour car seule la lecture initiale des attributs est implémentée. Contraintes : Utiliser uniquement Web Components natifs (Custom Elements, observedAttributes). Aucun framework. Code actuel : class UserProfile extends HTMLElement { connectedCallback() { this.render(); } render() { this.innerHTML = `<p>${this.getAttribute('name')}</p>`; } } customElements.define('user-profile', UserProfile); Livrable attendu : Implémenter une synchronisation complète entre attributs et propriétés afin que toute modification déclenche un rendu cohérent.

المهارات المستهدفة