Les composants Web sont plus faciles que vous ne le pensez

Composants Web: une fois intimidant, désormais étonnamment accessible. Mes expériences passées lors de conférences ont peint une image de géants complexes JavaScript, l'emportant apparemment sur les avantages. Mais un projet récent, axé sur la simplification de l'apprentissage HTML (avec des zombies et de l'humour, naturellement!), Force une plongée plus profonde dans<slot></slot> et<template></template> . Le résultat? Les composants Web sont beaucoup plus faciles que je ne m'en souviens.

Une série d'étapes simples

Cet article est le premier d'une série explorant les composants Web:

• Les composants Web sont plus faciles que vous ne le pensez (article en cours)
• Les composants Web interactifs sont plus faciles que vous ne le pensez
• L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez
• Suralimentation des éléments intégrés avec des composants Web «est» plus facile que vous ne le pensez
• Les composants web du contexte sont plus faciles que vous ne le pensez
• Les pseudo-classes et les pseudo-éléments des composants Web sont plus faciles que vous ne le pensez

Mon appréhension initiale a probablement éclipsé la réalité des composants Web modernes. Vérinons les mythes et construisons un composant ensemble.

La fondation:<template></template>

Le<template></template> L'élément fournit la structure HTML pour notre composant. Cela peut être remarquablement simple:

<template>
  <p>Les zombies arrivent!</p>
</template>

Cela forme la base pour notre<apocalyptic-warning></apocalyptic-warning> Composant - Une alerte opportune pour l'apocalypse zombie.

Personnalisation avec<slot></slot>

<slot></slot> nous permet de personnaliser le contenu rendu du modèle. Par exemple:

<template>
  <p>Le<slot> Zombies</slot> arrivent!</p>
</template>

Sans autre spécification, le<slot></slot> par défaut son contenu fermé ("zombies"). L'attribut name offre plus de contrôle:

<template>
  <p>Le<slot name="whats-coming"> Zombies</slot> arrivent!</p>
</template>

Cela crée un emplacement "What-Coming", permettant une insertion de contenu flexible (robots, loups-garous, ou même un composant Web apocalypse!).

Implémentation des composants

Maintenant, utilisons le composant:

<apocalyptic-warning> Minions de morts-vivants chargées d'halitose</apocalyptic-warning>

Le<apocalyptic-warning></apocalyptic-warning> Le composant se comporte comme un élément HTML standard. Le contenu dans les balises remplace l'espace réservé aux "zombies". N'oubliez pas: les noms d'éléments personnalisés doivent inclure un trait d'union (pour empêcher la dénomination des conflits avec les futurs éléments HTML).

Enregistrement des composants (JavaScript)

Bien qu'un JavaScript soit nécessaire, c'est beaucoup moins intimidant que prévu. Une fonction de constructeur enregistre l'élément personnalisé:

 CustomElements.define ("apocalyptique-aval", la classe étend htmlelement {
  constructeur () {
    super();
    Soit Warning = document.getElementById ("WarningTemplate");
    Laissez MyWarning = Warning.Content;
    const shadowroot = this.attachshadow ({mode: "open"}). appendChild (mywarning.clonenode (true));
  }
});

Le code commenté explique chaque étape. La ligne cruciale:

 const shadowroot = this.attachshadow ({mode: "open"}). appendChild (mywarning.clonenode (true));

Crée un Dom Shadow (avec mode: "open" pour l'accès javascript externe), ajout d'un modèle cloné et intègre le<slot></slot> mécanisme.

Style avec CSS

Le style CSS est simple. Inclure un

<template>
  <style>
    p { background-color: pink; padding: 0.5em; border: 1px solid red; }
  </style>Le<slot name="whats-coming"> Zombies</slot> arrivent!</template>

Le Dom Shadow garantit l'encapsulation du style. Bien que le contenu à fente réside en dehors du modèle, il fait partie de l'élément personnalisé, permettant aux sélecteurs CSS externes de le styliser. Cependant, les styles externes ne peuvent pas accéder directement aux éléments au sein du<template></template> ou Shadow Dom.

Un exemple complet: profil de rencontres zombies

Construisons un<zombie-profile></zombie-profile> composant, démontrant à la fois

The JavaScript remains similar, changing only the component name:

customElements.define("zombie-profile", class extends HTMLElement { /* ... */ });

The HTML template includes encapsulated CSS:

<template>
  <style> /* ... CSS styles ... */ </style>
<code><div>...</div></code> CSS externe (pour le contenu par défaut et fendu):<pre class="brush:php;toolbar:false"> Profile zombie {/ * ... Styles ... * /}

Cette approche holistique démontre la puissance et la simplicité des composants Web.

Bien qu'il existe des subtilités, le concept de base est accessible. Expérimentez avec les composants Web de vos projets pour apprécier leur facilité d'utilisation et leurs avantages. Maintenant, la seule vraie crainte est ... l'apocalypse zombie (et si mes pertes perpétuelles couvrent les collations).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!