Web 组件 - JavaScript 编程网

Web组件基础教程主要围绕自定义元素、Shadow DOM和HTML模板这三个核心概念展开。以下是简要介绍和示例：

1. 自定义元素（Custom Elements）

自定义元素允许你定义自己的HTML标签，这样可以创建具有特定功能和样式的可复用组件。

步骤:

定义类: 通过继承HTMLElement来创建一个新类。
使用customElements.define注册: 注册你的自定义元素。

示例:

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'Hello, Web Components!';
  }
}
customElements.define('hello-world', HelloWorld);

在HTML中使用它：

<hello-world></hello-world>

2. Shadow DOM

Shadow DOM允许你为元素创建一个隔离的DOM树，包括样式和结构，这样可以避免全局CSS污染。

示例:

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 1rem;
          margin: 1rem;
        }
      </style>
      <div class="card"><slot></slot></div>
    `;
  }
}
customElements.define('my-card', MyCard);

使用时：

<my-card>这是一个卡片</my-card>

3. HTML模板（Templates）

<template>元素用于定义可复用的DOM片段，初始时不渲染到页面。

示例:

<template id="card-template">
  <style>
    .card { /* 样式 */ }
  </style>
  <div class="card"><slot></slot></div>
</template>

然后，可以通过JavaScript实例化并使用模板：

const template = document.getElementById('card-template');
const instance = template.content.cloneNode(true);
document.body.appendChild(instance);

综合示例

结合上述技术，你可以创建一个完整的Web组件，如一个简单的卡片组件：

class MyCard extends HTMLElement {
  constructor() {
    super();
    const template = document.querySelector('#card-template').content;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.cloneNode(true));
  }
}

customElements.define('custom-card', MyCard);

HTML中需要有对应的模板定义：

<template id="card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 1rem;
      margin: 1rem;
    }
  </style>
  <div class="card"><slot></slot></div>
</template>

<custom-card>这是一张自定义卡片。</custom-card>

通过上述基础教程，你应该能够开始创建和使用自己的Web组件了。随着实践深入，可以探索更复杂的交互逻辑和样式技巧，以及如何与其他Web技术（如框架集成、ES Modules等）协同工作。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏