La gestion de la structure et du style des composants dans le développement Web peut souvent devenir difficile, en particulier lorsque l’on travaille sur des projets à grande échelle avec plusieurs développeurs ou que l’on intègre des composants tiers. Étant donné que CSS est global, il existe un risque de conflits CSS et de changements de style accidentels, ce qui constitue un problème courant pour les développeurs.
C’est ici que le Shadow DOM entre en jeu en tant qu’outil de résolution de problèmes :
Qu’est-ce que Shadow DOM ?
Shadow DOM sert de protection efficace pour les composants Web. Il encapsule leurs styles et leur structure, les empêchant de perturber le reste de la page Web. C’est un moyen de créer des composants indépendants qui n’entrent pas en conflit avec les styles globaux, rendant votre code plus modulaire et réutilisable. Considérez cela comme accordant à chaque composant son propre espace personnel pour effectuer ses tâches.
Création de Shadow DOM : un guide étape par étape
Voyons un exemple de code simple et apprenons comment utiliser Shadow DOM pour créer des éléments personnalisés en créant un simple formulaire de connexion.
Ainsi, pour créer un élément personnalisé, nous devons d’abord créer une classe qui doit s’étendre à partir de la classe d’élément HTML.
alors nous ajouterons un constructeur et appellerons le super fonctionSi nous n’appelons pas la super fonction, alors le mot-clé ‘this’ de cette classe ne sera pas initialisé.
Créons maintenant un élément ombre en utilisant la méthode attachShadow. Dans cette méthode, nous devons fournir à un objet la valeur de mode ; il peut être ouvert ou fermé.
Créez un « formulaire » d’élément racine en appelant document.createElement et la référence sera stockée dans le formulaire variable.
Créons maintenant les étiquettes et les entrées pour le nom d’utilisateur et le mot de passe, ainsi que le bouton pour le formulaire Soumettre.
Ensuite, nous ajouterons du texte aux étiquettes et au bouton à l’aide de la propriété « textContent » et définirons les attributs « types » et « placeholder » pour le formulaire et ses entrées à l’aide de la méthode « setAttribute ».
Application de styles au Shadow DOM.
Commençons par ajouter Form et ses éléments au Shadow DOM
Ces deux lignes ajouteront l’élément ‘
Source link