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

Type d'évaluation

Mise en situation réelle

Analyse

Intelligence Artificielle

Compétences ciblées

webcomponents
attributes
properties
lifecycle
reactivity

Scénario Technique

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.

Prêt à évaluer ce talent ?

Accédez à l'interface de test complète pour soumettre votre architecture ou votre code.

Commencer le Défis