Home >Web Front-end >JS Tutorial >How to Build a Simple Web Component from Scratch

How to Build a Simple Web Component from Scratch

Barbara StreisandOriginal: 2025-01-23 01:00:14810browse

This guide demonstrates building a reusable web component: a simple counter. We'll leverage Custom Elements, Shadow DOM, and HTML Templates. The finished counter will feature buttons to increment and decrement a displayed numerical value.

A complete, runnable version of this code is available here.

Prerequisites:

Familiarity with basic JavaScript and a conceptual understanding of the DOM (Document Object Model) are helpful, though not strictly required.

Project Setup:

Create two files: counter.html (containing the page structure) and counter.js (housing the custom element definition).

counter.html (Initial Structure):

<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>

Creating the Template (counter.html - Adding the Template):

We'll define the counter's visual structure using an HTML template:

<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>

This template won't render directly; it serves as a blueprint for our custom element.

Defining the Custom Element (counter.js):

This JavaScript code defines the counter's functionality:

<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>

This class extends HTMLElement. connectedCallback handles setup when the element is added to the page, including attaching the shadow DOM and event listeners. increment, decrement, and displayCount manage the counter's value and display.

Using the Counter Component (counter.html - Adding the Custom Element):

To use the counter, simply add <x-counter></x-counter> to your HTML.

Styling the Component (counter.js - Adding Styles):

Encapsulate styling within the component using 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>

This adds basic styling, contained within the shadow DOM.

Conclusion:

This tutorial demonstrates creating a simple, reusable web component. The use of templates, shadow DOM, and custom elements promotes modularity and maintainability in web development. Remember to replace [here](https://www.php.cn/link/2eac42424d12436bdd6a5b8a88480cc3) with the actual link to your final code.

The above is the detailed content of How to Build a Simple Web Component from Scratch. For more information, please follow other related articles on the PHP Chinese website!

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Is library node-onvif still usable?Next article：Is library node-onvif still usable?

See more

How to Build a Simple Web Component from Scratch

Related articles