Web 组件入门指南_科技

将和谐注入您组织的组件库：这是我们的 Web 组件指南，教您如何开始定义自己的组件。

作者 David 是一位在伦敦工作的专业软件开发人员，曾在 Corp. 和英国电信担任职务，并担任顾问，帮助团队更敏捷地工作。

虽然像网络这样的开放创新平台鼓励多种用途，但混乱的缺点是定义当前网络的声音不一。通常在技术发展的这个阶段，行业领导者会聚集在一起制定规则和法规，以方便地巩固其优势，同时也为消费者提供更清晰的信息。这就是为什么几乎任何人都可以定义构成汽车的重要组件，但对于网站来说可能很难这样做。

像画一个圆圈或将文本放入框中这样简单的事情可以通过多种方式完成。这是因为，例如，简单的形状不是网络的第一级对象。例如，这是 CSS 中定义的一个圆：

.circle 
{ 
  height: 150px; 
  width: 150px;  
  border: solid 1px; 
  border-radius: 50%; 
  display: inline-block; 
}

页面的下一个内容是：

现在，这产生了一个漂亮的圆圈。虽然“”一词本身在定义中不起任何作用，但它作为 HTML 和 CSS 的组合来创建我需要的对象。如果您接着问“它是什么颜色？”，这在很大程度上取决于继承的上下文及其包含的内容。我可以使用 .io 这样的沙箱来确认它是否有效。

我还可以使用 App.jsx 文件中的框架在 .io 中绘制一个圆圈：

结果又是一个漂亮的圆圈。

这是一个很好的框架。但是，然后我必须在所有其他方面有效地继续使用该库。并且很难保证这些在不同的浏览器上都能正常工作。此外，就像它的前身一样，它也受到命运的摆布。我们真正想要的是一种表达组件的“官方”方式。

介绍网络

Web 组件是一种“创建可在任何页面上重用的封装的、单一职责的代码块”的方法。它们由以 Web API 形式表达的现有标准组成，多年来各供应商已同意并实施这些标准。它们现在已经成熟并广泛使用，足以挑战现有的流行框架。所有现代浏览器都支持该规范已有一段时间了。

Web 组件允许您定义自定义元素（例如“my-”），然后注册它们。

这很棒，但正如我所暗示的，控制它们需要控制其他地方的 CSS。为了解决这个问题，Web 组件可以在影子 DOM 中包含自己的一组规则。这只是一个单独的对象树，不会与主 DOM 冲突。

最后，模板和槽允许您定义渲染时不显示的惰性片段，但可以在以后重用。所以我可以定义这样的东西：

这不会渲染，但可以稍后间接引用并用作通用构建块。

Web组件是用JS构建的；是的，我知道有些人希望在他们的网站上使用更少的 JS。但目前来说，情况就是这样。

Web 组件是自定义 HTML 元素，例如 . 该名称必须包含连字符，以便它不会与 HTML 规范中正式支持的元素发生冲突。因此，我们建立了一种关系：浏览器将始终了解 HTML 标签，但会尊重新标签。他们如何知道新标签？

将组件定义为类后，您需要使用 y 注册它，如下所示：

customElements.define('my-circle', MyCircle);

然后，需要构建该组件。我们知道班级的名称，因为我们刚刚注册了它。我在查看文档示例后将其拼凑在一起：

class MyCicrle extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
  }
 
  connectedCallback() {
    // Create a shadow root
    const shadow = this.attachShadow({ mode: "open" });
 
    // Create spans
    const wrapper = document.createElement("span");
    wrapper.setAttribute("class", "smallcircle");
 
    // Create some CSS to apply to the shadow dom
    const style = document.createElement("style");
    console.log(style.isConnected);
 
    style.textContent = `
 
      .smallcircle {
        height: 150px;  
        width: 150px; 
        border: solid 1px;  
        border-radius: 50%;  
        display: inline-block;
        color: #ffffff;
      }
    `;
 
    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
  }
}

我在没有使用任何包的情况下成功运行了这段代码。这只是我们之前的循环示例的手工构建，但已使用。它确实证明了 Web 组件即使在这个沙箱中也是可以运行的。这两条日志消息记录了我们附加样式元素之前和之后 DOM 的变化。方法是用于使 Web 组件工作的生命周期规范的一部分。当元素首次添加到主文档时，此方法是不可避免的“设置”调用。

所以我只是做了很多画圆的工作。为了展示其组件性质，让我再做一点。通过读取属性，我至少可以改变颜色：

毫无疑问，定义自定义元素的清晰度使得在页面上使用 Web 组件成为一个愉快的过程。代码更改非常简单：

... 
let clr; 
if (this.hasAttribute("color")) 
{ 
  clr = this.getAttribute("color"); 
} 
else 
{ 
  clr = "white"; 
} 
style.textContent = ` 
 .smallcircle { 
   height: 150px; 
   width: 150px; 
   border: solid 1px; 
   border-radius: 50%; 
   display: inline-block; 
   color: ${clr}; 
 } 
`; 
...

我没有使用模板的示例，但使用类似的技术，您可以抓取并克隆它们，然后将它们插入到影子 DOM 中。毕竟，在 HTML 中定义 HTML 更容易。

按照我的扩展方式，我还可以扩展现有的 HTML 元素并从那里开始。

Web 组件的实践

但是，Web 组件是否来得太晚，不足以让流行框架过时呢？在大多数情况下，Web 组件可以与框架组件一起使用，尽管服务器端渲染确实会出现一个单独的问题（我不会在这里讨论）。

当一个小型 UX 团队想要开发一个他们知道能够经受时间考验的库时，Web 组件的力量就真正发挥了作用。业务和开发团队之间的想法不再需要转化为 React 或 React。适合您品牌形象的复杂组件可以像常规标签一样使用。想象一个可以在整个组织中使用的“my-”标签，而不是“my-”标签——用户体验团队控制开发，但没有陷入框架的风险。这拉近了设计师和开发人员的距离。

因此，使用Web ，组织的组件库不仅更加稳定，而且更少依赖于其他地方定义的另一层，使用远远超出开发团队范围的语言。它给网络的“狂野西部”带来了一点和谐。