Maison >interface Web >js tutoriel >Comment créer un composant Web simple à partir de zéro

Comment créer un composant Web simple à partir de zéro

Barbara Streisandoriginal: 2025-01-23 01:00:14855parcourir

Ce guide montre la création d'un composant Web réutilisable : un simple compteur. Nous exploiterons les éléments personnalisés, le Shadow DOM et les modèles HTML. Le compteur fini comportera des boutons pour incrémenter et décrémenter une valeur numérique affichée.

How to Build a Simple Web Component from Scratch

Une version complète et exécutable de ce code est disponible ici.

Prérequis :

Une familiarité avec JavaScript de base et une compréhension conceptuelle du DOM (Document Object Model) sont utiles, mais pas strictement requises.

Configuration du projet :

Créez deux fichiers : counter.html (contenant la structure de la page) et counter.js (hébergeant la définition de l'élément personnalisé).

counter.html (Structure initiale) :

<code class="language-html"><!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Counter Component</title>
</head>
<body>
  <script src="counter.js"></script>
</body>
</html></code>

Création du modèle (counter.html - Ajout du modèle) :

Nous définirons la structure visuelle du comptoir à l'aide d'un modèle HTML :

<code class="language-html"><template id="x-counter">
  <button id="min-btn">-</button>
  <span id="counter-display">0</span>
  <button id="plus-btn">+</button>
</template></code>

Ce modèle ne sera pas rendu directement ; il sert de modèle pour notre élément personnalisé.

Définition de l'élément personnalisé (counter.js) :

Ce code JavaScript définit la fonctionnalité du compteur :

<code class="language-javascript">class XCounter extends HTMLElement {
  constructor() {
    super();
    this.counter = 0;
    this.elements = {};
  }

  connectedCallback() {
    const template = document.getElementById("x-counter");
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.elements = {
      plusBtn: this.shadowRoot.querySelector("#plus-btn"),
      minBtn: this.shadowRoot.querySelector("#min-btn"),
      counterDisplay: this.shadowRoot.querySelector("#counter-display")
    };
    this.displayCount();
    this.elements.plusBtn.onclick = () => this.increment();
    this.elements.minBtn.onclick = () => this.decrement();
  }

  increment() {
    this.counter++;
    this.displayCount();
  }

  decrement() {
    this.counter--;
    this.displayCount();
  }

  displayCount() {
    this.elements.counterDisplay.textContent = this.counter;
  }
}

customElements.define("x-counter", XCounter);</code>

Ce cours s'étend HTMLElement. connectedCallback gère la configuration lorsque l'élément est ajouté à la page, y compris l'attachement du Shadow DOM et des écouteurs d'événements. increment, decrement et displayCount gèrent la valeur et l'affichage du compteur.

Utilisation du composant compteur (counter.html - Ajout de l'élément personnalisé) :

Pour utiliser le compteur, ajoutez simplement <x-counter></x-counter> à votre HTML.

Style du composant (counter.js - Ajout de styles) :

Encapsulez le style dans le composant en utilisant adoptedStyleSheets :

<code class="language-javascript">connectedCallback() {
  // ... (previous code) ...
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(this.styles());
  this.shadowRoot.adoptedStyleSheets = [sheet];
  // ... (rest of connectedCallback) ...
}

styles() {
  return `
    :host {
      display: block;
      border: dotted 3px #333;
      width: fit-content;
      height: fit-content;
      padding: 15px;
    }
    button {
      border: solid 1px #333;
      padding: 10px;
      min-width: 35px;
      background: #333;
      color: #fff;
      cursor: pointer;
    }
    button:hover {
      background: #222;
    }
    span {
      display: inline-block;
      padding: 10px;
      width: 50px;
      text-align: center;
    }
  `;
}</code>

Cela ajoute un style de base, contenu dans le DOM fantôme.

Conclusion :

Ce tutoriel montre la création d'un composant Web simple et réutilisable. L'utilisation de modèles, de shadow DOM et d'éléments personnalisés favorise la modularité et la maintenabilité dans le développement Web. N'oubliez pas de remplacer [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) par le lien réel vers votre code final.

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!

JavaScript html Object define for using class Event JS dom this display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La bibliothèque node-onvif est-elle toujours utilisable ?Article suivant：La bibliothèque node-onvif est-elle toujours utilisable ?

Articles Liés

Voir plus