现代 Web 组件

我是“追踪圣诞老人”项目的负责人。没错，我知道现在已经是六月了——离假期可不远了。💼

我想谈谈 Web 组件。简单回顾一下：这些是自定义元素，它们可能使用 Shadow DOM，允许使用你自己命名的元素，这些元素包含自己的 CSS、样式和 DOM：

<div>
  <my-custom-element></my-custom-element>
  <p>Mixed with regular HTML!</p>
</div>

聚合物远离👋

我们更新 Santa 的核心 UI 并移除Polymer Web Component库的原因之一是 Polymer 具有粘性。Polymer 只有在与其交互的所有其他元素也都是 Polymer 时才能真正发挥作用：它接触到的任何东西也都需要以相同的方式工作。

这不可扩展，也给我们未来发展留下了空间。像WebComponents.org这样的网站（在 Google 大力推广 Polymer 的鼎盛时期发布）宣称 #UseThePlatform，但我怀疑那里的大多数元素都存在同样的问题。

平滑元素😎

我们使用 Lit 重写圣诞老人追踪器的核心 UI 的主要原因之一lit-element是，与 Polymer 不同，Lit并不具有粘性。它只是一个辅助库，可以与页面上的任何其他元素互换使用。🤝

因此，在重写“追踪圣诞老人”的过程中，我们发现很多元素除了内置类之外，根本不需要继承其他任何类HTMLElement，因为它们只是一些简单的构建块。我们称之为“原生”元素。🍨

撇开光不谈，市面上有各种各样的 Web 组件库，无论大小，都可以充当辅助工具。我的好朋友 Trey 编写了SkateJS，在 dev.to 上搜索#webcomponents标签就能找到很多候选库。🔎

当然，你可能不应该同时发布几个不同的库：这样做很合理，既能节省字节数，又不会让代码过于复杂。但是，如果你今天用 Lit，明天用 Skate 重写（还带一点原生代码），那么在迁移过程中，你可以安全地让这些库共存，这样你的网站就永远不会不可用了。🤗

一个例子🔥

为了完整起见，让我们展示一下 Lit 中的元素：

class SimpleGreeting extends LitElement {
  static get properties() {
    return { name: { type: String } };
  }

  constructor() {
    super();
    this.name = 'World';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

很简单吧？SkateJS 有一个类似的、简单的入门示例。🛹

香草示例🍦

一个简单的元素可能看起来是这样的，没有任何库，只使用平台：

class SantaChoiceElement extends HTMLElement {
  constructor() {
    super();

    const template = Object.assign(document.createElement('template'), {
      innerHTML: `
<style>/* CSS here */</style>
<div class="wrap">
  <!-- more HTML -->
</div>
`,
    });

    // polyfill for CSS in Shadow DOM
    if (self.ShadyCSS) {
      self.ShadyCSS.prepareTemplate(template, 'santa-choice');
    }
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(document.importNode(template.content, true));
  }
}
customElements.define('santa-choice', SantaChoiceElement);

对于大约 10% 不支持 Shadow DOM 的用户来说，这段代码的复杂程度仅仅体现在代码本身（使用了 Shady CSS 的 polyfill 插件）上。Lit 将这些代码“免费”包含在内。🆓

顺便说一句，这是我非常自豪的一个元素，它驱动着Elf Maker 🧝<santa-choice>底部的选择器。我希望有一天能写出它的工作原理。

谢谢！

希望以上内容能让你对 WC（Web 组件）有所了解。对我来说，真正让我豁然开朗的是，我意识到使用 Lit 或其他库的好处在于，它并非包罗万象：它们可以与生态系统中的任何其他部分完美兼容，你可以根据需要随意使用。👍

16 👋