释放 Web 组件和自定义元素的强大功能，实现可重用 UI 设计

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Create Shadow DOM
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: blue;
          color: white;
          font-size: 16px;
        }
      </style>
      <button>Click Me</button>
    `;
  }
}

// Define the custom element
customElements.define('my-button', MyButton);

类 MyCard 扩展 HTMLElement {
  构造函数（）{
    极好的（）;
    this.attachShadow({ 模式: '打开' });
  }

  连接回调() {
    this.shadowRoot.innerHTML = `
      
        。卡片 {
          边框：1px实心#ddd；
          内边距：20px；
          边框半径：5px；
          背景颜色：#f4f4f4；
        }
      </风格>
      <div>



<p>这里，.card 类的作用域为 my-card 元素的 Shadow DOM，并且不会影响主文档中的任何其他 .card 类。</p>


<hr>

<h3>
  
  
  <strong>HTML 模板：可重复使用的内容</strong>
</h3>

<p><strong>HTML <template></template></strong> 标签允许您定义可重复使用的 HTML。 内的内容页面加载时标签不会呈现，但可以在需要时克隆并插入到 DOM 中。</p>

<p><strong>示例：</strong><br>
</p>

<pre class="brush:php;toolbar:false">



<p>这里，模板内容在脚本运行时被克隆并添加到文档中，提供了一种重用部分 UI 的便捷方法。</p>


<hr>

<h3>
  
  
  <strong>为什么使用 Web 组件？</strong>
</h3>

<ol>
<li>
<strong>可重用性</strong>：一旦创建，Web 组件就可以在任何 Web 应用程序或框架中重用，而无需担心兼容性。</li>
<li>
<strong>封装</strong>：Shadow DOM 确保您的组件与外部样式和脚本隔离，防止冲突并使其更易于维护。</li>
<li>
<strong>与框架无关</strong>：Web 组件基于本机 Web 标准构建，这意味着它们可以跨各种框架（例如 React、Angular、Vue）使用，而不需要额外的依赖项。</li>
<li>
<strong>互操作性</strong>：Web 组件可以与其他 JavaScript 代码和库交互，从而实现与现有应用程序的无缝集成。</li>
<li>
<strong>可定制</strong>：您可以轻松地使用特性和属性自定义 Web 组件，以动态更改其行为和外观。</li>
</ol>


<hr>

<h3>
  
  
  <strong>何时使用 Web 组件？</strong>
</h3>

<p>Web 组件在以下情况下是一个不错的选择：</p>