Superchargement des éléments intégrés avec des composants Web 'est' plus facile que vous ne le pensez

Cet article explore un aspect puissant des composants Web: personnalisation des éléments HTML intégrés. Bien que nous ayons déjà couvert la création d'éléments personnalisés, cette technique améliore les éléments existants, offrant des avantages tels que l'amélioration du référencement et l'accessibilité. Il est similaire à la création d'éléments entièrement indépendants, mais avec des différences clés.

Série d'articles:

• Les composants Web sont plus faciles que vous ne le pensez
• 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 (vous êtes ici)
• 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

L'attribut is transforme un élément standard en un composant Web. Cela exploite la structure et les fonctionnalités inhérentes de l'élément tout en ajoutant des fonctionnalités personnalisées. Les moteurs de recherche et les lecteurs d'écran comprennent facilement les éléments standard, ce qui rend cette approche plus accessible que la création de balises personnalisées entièrement nouvelles.

Remarque importante: Safari et certains navigateurs moins courants ne prennent en charge que les éléments personnalisés entièrement indépendants, pas cette personnalisation d'élément intégrée. Nous aborderons les polyfills plus tard.

Refactor<apocalyptic-warning></apocalyptic-warning> élément d'un article précédent en tant qu'élément intégré personnalisé. Le changement de base consiste à étendre un élément spécifique (par exemple, HTMLDivElement ) au lieu du HTMLElement générique, et ajoutant { extends: 'div' } à customElements.define() .

 CustomElements.define (
  "Avannage apocalyptique",
  classe apocalypsewarning étend htmlousively {
    constructeur () {
      super();
      Soit Warning = document.getElementById ("WarningTemplate");
      Laissez MyWarning = Warning.Content;
      this.attacheshadow ({mode: "ouvrir"}). APPENDCHILD (myWarning.clonenode (true));
    }
  },
  {étend: "div"}
));

Le HTML passe à partir de<apocalyptic-warning></apocalyptic-warning> à<div is="apocalyptic-warning"> .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div is=&quot;apocalyptic-warning&quot;&gt; Morts-vivants &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <p>N'oubliez pas: les utilisateurs de Safari ne verront pas les améliorations des composants Web.</p> <p> Seuls les éléments spécifiques prennent en charge Shadow Dom. Les considérations de sécurité limitent cela aux éléments de mise en page comme<code><div> ,<code><nav></nav> ,<main></main> , etc., des éléments de texte comme<h1></h1> à<h6></h6> , et le élément. Des éléments personnalisés autonomes sont également inclus.<p> La création d'un composant Web ne nécessite pas toujours de Shadow Dom. Construisons une image avec une Lightbox intégrée pour illustrer cela. Nous utiliserons l'attribut <code>is et un attribut de données ( data-lbsrc ) pour l'image plus grande.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="Ninja zombie silencieux mais comme silencieux" data-lb is="light-box">

Le JavaScript est rationalisé, omettant des modèles d'ombre, des modèles et des emplacements:

 CustomElements.define (
  "Box Light",
  classe Lightbox étend htmlimageelement {
    constructeur () {
      super();
      Soit lb = document.CreateElement ("div");
      lb.style.display = "aucun";
      lb.style.position = "absolu";
      lb.style.height = "100vh";
      lb.style.width = "100vw";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background = `rgba (0,0,0, 0,7) URL ($ {this.dataset.lbsrc}) non-repat Center`;
      lb.style.backgroundSize = "contenu";
      lb.addeventListener ("cliquez", () => lb.style.display = "Aucun");
      this.parentNode.insertBefore (lb, this);
      this.addeventListener ("cliquez", () => lb.style.display = "bloc");
    }
  },
  {étend: "img"}
));

Pour assurer la compatibilité des navigateurs croisés, en particulier pour Safari, nous utiliserons un polyfill. Bien qu'il existe des polyfills généraux, une approche plus ciblée est souvent plus efficace. Étant donné que Safari prend en charge les éléments personnalisés autonomes, nous pouvons créer un autonome<lightbox-polyfill></lightbox-polyfill> élément comme une repli. (Le code de ce polyfill est omis pour la concision mais impliquerait de créer une fonctionnalité Lightbox similaire dans un élément personnalisé autonome.) La logique conditionnelle basculera ensuite entre l'élément intégré personnalisé et le polyfill basé sur la prise en charge du navigateur. Cela garantit une fonctionnalité cohérente dans tous les navigateurs. La dernière étape serait d'incorporer cette logique conditionnelle pour utiliser le polyfill uniquement lorsque cela est nécessaire.

Cette approche permet de créer des éléments intégrés personnalisés tout en maintenant le HTML sémantique et en garantissant une compatibilité plus large du navigateur grâce à l'utilisation de polyfills.