Introduction to Web Components: Custom Elements, Shadow DOM, Templates, and Slots

Web Components are a set of native browser technologies that enable developers to create reusable, encapsulated custom elements with their own markup, style, and behavior, without loading external modules.

The article first defines Web Components and explains why they are useful for code reuse across frameworks like Vue, React, and Angular.

Custom Elements are introduced with a simple example that defines a UserCard class extending HTMLElement and registers it via customElements.define('user-card', UserCard) . The article also distinguishes between autonomous custom elements and customized built‑in elements, showing how to use the is attribute or document.createElement with options.

<style>
  body #container {
    color: #fff;
  }
</style>
<div>
  <!--使用自定义标签-->
  <user-card></user-card>
  <user-card></user-card>
</div>
<script>
  // 定义组件类
  class UserCard extends HTMLElement {
    constructor () {
      super();
      const elm = document.createElement('div');
      elm.textContent = 'Hello world';
      elm.id = 'container';
      elm.onclick = function () { console.log('Custom elements') };
      const style = document.createElement('style');
      style.textContent = `
        body { background: red; }
        #container { color: blue }
      `;
      this.append(elm, style);
    }
  }
  // 注册组件
  customElements.define('user-card', UserCard);
</script>

The Lifecycle Callbacks of custom elements are listed: connectedCallback , disconnectedCallback , adoptedCallback , and attributeChangedCallback , with brief descriptions of when each is invoked.

Shadow DOM is presented as the solution for DOM and style isolation, showing how to attach a shadow root in the constructor and move the element and style into it.

let shadow = this.attachShadow({mode: 'open'});
shadow.appendChild(elm);
shadow.appendChild(style);

The article explains the difference between open (accessible via element.shadowRoot ) and closed (returns null ) shadow roots, and notes browser support.

Next, Templates and Slots are introduced to simplify complex component markup. A <template> element containing HTML and CSS is defined, then cloned and attached to the shadow DOM.

<template id="userCardTemplate">
  <style>
    .wrapper { display: flex; }
    .container { margin-left: 10px; }
    img { width: 150px; }
  </style>
  <div class="wrapper">
    <img src="https://semantic-ui.com/images/avatar2/large/kristy.png" class="image">
    <div class="container">
      <p class="name"><slot name="uName">占位</slot></p>
      <p class="email"><slot name="email">占位</slot></p>
      <button class="button" onclick="follow()">关注</button>
    </div>
  </div>
</template>

class UserCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const tmpl = document.getElementById('userCardTemplate');
    const content = tmpl.content.cloneNode(true);
    shadow.append(content);
  }
}
customElements.define('user-card', UserCard);

The final section summarizes the benefits of Web Components—framework‑agnostic reuse, native encapsulation, and style isolation—while also noting drawbacks such as limited browser compatibility and the need for direct DOM manipulation.

References to MDN documentation and several Chinese articles are provided for further reading.