jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Générateur de Shadow DOM déclaratif

Créez des snippets HTML pour le Shadow DOM déclaratif avec CSS scopé, slots et rendu serveur.

Chargement de l'outil...

Qu'est-ce que Générateur de Shadow DOM déclaratif ?

Le Declarative Shadow DOM est une fonctionnalite navigateur qui cree un Shadow DOM a partir du balisage HTML sans JavaScript. Un element template avec l'attribut shadowrootmode a l'interieur d'un element hote indique au navigateur de creer une racine shadow et de la remplir avec le contenu du template. Cela permet le rendu cote serveur de composants web avec du CSS isole, fonctionnant avant le chargement de JavaScript.

Réponse rapide

Le Declarative Shadow DOM cree un DOM encapsule et du CSS isole a partir du balisage HTML sans JavaScript. Utilisez <template shadowrootmode='open'> a l'interieur d'un element hote de composant personnalise. Supporte dans Chrome, Edge et Safari. Incluez du contenu de repli pour Firefox.

Last updated: 2026-05-28

Limites

  • Firefox ne supporte pas encore Declarative Shadow DOM. Incluez toujours du contenu de repli.
  • Declarative Shadow DOM ne cree la racine shadow et le contenu que lors de l'analyse initiale de la page. Le balisage DSD ajoute dynamiquement n'est pas traite.
  • Certains frameworks et bibliotheques JavaScript ne s'integrent pas encore avec Declarative Shadow DOM pour l'hydratation SSR.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez une balise hote d'element personnalise avec un trait d'union (obligatoire pour les noms d'elements personnalises valides).
  2. Choisissez le mode de racine shadow ouvert ou ferme - ouvert permet l'acces JavaScript via shadowRoot.
  3. Ajoutez le contenu HTML interieur avec des elements slot pour la projection de contenu.
  4. Ajoutez optionnellement du CSS isole qui s'applique uniquement a l'interieur de cette racine shadow.
  5. Copiez l'extrait et incluez-le dans votre sortie SSR ou HTML statique.

A quoi il sert

  • Rendre un composant web avec CSS isole sur le serveur pour qu'il apparaisse immediatement sans JavaScript.
  • Creer un widget HTML autonome avec des styles isoles pour l'integration dans n'importe quelle page.
  • Construire un composant de site statique avec encapsulation shadow DOM sans etape de build.

Cas d'usage

Exemples concrets

Exemple

Carte utilisateur rendue sur le serveur

Un composant de carte utilisateur affiche un avatar, un nom et un role. Utilisez Declarative Shadow DOM pour rendre la carte avec du CSS isole sur le serveur.

Exemple

Widget CSS isole

Un widget integrable utilise Declarative Shadow DOM pour encapsuler ses styles. Le CSS de la page hote n'affecte pas le widget, et le CSS du widget ne fuit pas.

Erreurs frequentes

  • Utiliser une balise hote sans trait d'union - les noms d'elements personnalises doivent contenir un trait d'union pour etre valides.
  • Definir shadowrootmode closed et s'attendre a acceder a la racine shadow depuis JavaScript exterieur - le mode ferme bloque tout acces JavaScript externe.
  • Oublier le contenu de repli pour les navigateurs qui ne supportent pas Declarative Shadow DOM.

Vérification

  1. Ouvrez le panneau Elements des outils de developpement et verifiez qu'une #shadow-root est presente dans l'element hote.
  2. Testez la page avec JavaScript desactive pour confirmer que le shadow DOM s'affiche correctement.

FAQ

Questions sur Générateur de Shadow DOM déclaratif

Quels navigateurs supportent Declarative Shadow DOM ?

Chrome 90+, Edge 90+ et Safari 17+ supportent Declarative Shadow DOM. Le support Firefox est en developpement. Pour les navigateurs non supportes, incluez du contenu de repli.

Puis-je utiliser Declarative Shadow DOM avec des slots ?

Oui. Les slots fonctionnent de la meme maniere dans Declarative Shadow DOM que dans Imperative Shadow DOM. Les slots nommes projettent du contenu specifique dans la racine shadow.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi