Declarative Shadow DOM

Definition

Permet de définir un Shadow DOM directement en HTML via <template shadowrootmode='open'>, sans JavaScript. Le navigateur attache automatiquement le shadow root au parsing.

Analogie

Comme un meuble livré déjà monté au lieu d'un kit à assembler soi-même.

Exemple de code

<my-card>
  <template shadowrootmode="open">
    <style>p { color: blue; }</style>
    <p><slot></slot></p>
  </template>
  Contenu visible
</my-card>

Cas d'usage

SSR de Web Components : le contenu encapsulé est rendu côté serveur sans flash de contenu non stylisé.

Termes lies