通过 Lit 构建 Web Components 相比原生构建 WC 的主要优势

使用 lit（或其前身 lit-html）来构建 Web Components 组件相比直接原生构建有多个优势，包括更简洁的模板语法、更方便的状态管理、更好的性能优化等。下面我将通过一个简单的例子展示这些优势。

使用 Lit 构建 Web Components

import {LitElement, html, css} from 'lit';

class MyLitElement extends LitElement {
  static properties = {
    title: { type: String },
    count: { type: Number }
  }

  constructor() {
    super();
    this.title = 'Hello Lit';
    this.count = 0;
  }

  render() {
    return html`
      <h1>${this.title}</h1>
      <p>Count: ${this.count}</p>
      <button @click=${this._increment}>Increment</button>
    `;
  }

  _increment() {
    this.count += 1;
  }

  static styles = css`
    :host {
      display: block;
      padding: 16px;
      border: 1px solid #ccc;
      margin: 16px 0;
    }
    h1 {
      color: #333;
    }
  `;
}

customElements.define('my-lit-element', MyLitElement);

直接使用原生 Web Components

class MyNativeElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.title = 'Hello Native';
    this.count = 0;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 16px;
          border: 1px solid #ccc;
          margin: 16px 0;
        }
        h1 {
          color: #333;
        }
      </style>
      <h1>${this.title}</h1>
      <p>Count: ${this.count}</p>
      <button>Increment</button>
    `;

    // Add event listener for the button
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.count += 1;
      this.render(); // Re-render to update the count
    });
  }
}

customElements.define('my-native-element', MyNativeElement);

优势对比：

• 模板字符串：在 lit 的例子中，我们使用了 JavaScript 模板字符串和标签函数 html 来定义 HTML 模板，这使得代码更加易读且易于维护。
• 状态管理：lit 自动处理属性的变化并重新渲染受影响的部分，而原生 Web Components 需要手动调用 render() 方法。
• 事件绑定：lit 允许我们以一种声明式的方式添加事件监听器，而原生 Web Components 则需要显式地选择元素并添加监听器。
• 样式封装：两者都支持阴影 DOM 和样式封装，但是 lit 提供了一个更简明的方式来定义组件级别的 CSS 样式。

因此，虽然两种方法都能实现相同的功能，但 lit 提供了更简洁的 API 和更强大的特性，使开发者能够更快捷高效地开发复杂的 Web Components。