How to Build a Simple Web Component from Scratch-JS Tutorial-php.cn

How to Build a Simple Web Component from Scratch

Barbara Streisand

Release： 2025-01-23 01:00:14

Original

809 people have browsed it

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.

How to Build a Simple Web Component from Scratch

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!