大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。
免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Getting into web components – an intro。
本期共享的是 —— 今年对于 WC（Web Components，Web 组件）而言兹事体大，本人对此感到鸡冻。说实话，不久前本人对 WC 几乎一无所知，因为私以为 WC 只是网络上不值一提的蜉蝣之物。但 WC 正在引起更多话题。所以我想更多地了解 WC。
WC 是什么鬼物？
WC 就像网站的构建块，甚至可能是构建块组。
我们可以自定义元素，比如 <my-button> 或 <for-love>，而不是循规蹈矩地使用 <div> 或 <button> 等标准标签。自定义元素代表我们可以在网站或网络 App 中使用和重用的独特组件。自定义元素内部始终需要有一个连字符，用来区分其与标准 HTML 元素，并遵循 WC 规范设置的命名约定。
连字符背后的主要原因是为了避免冲突，减少与标准 HTML 元素发生命名冲突的机会。由于标准 HTML 元素不包含连字符（当然，现在永远不会包含连字符）。
Shadow DOM
Shadow DOM 就像一个 Web 元素的“密室”。假设我们有一个工作区，我们正在其中构建网站的不同部分。某些部分需要在不影响其余部分的情况下完成工作。Shadow DOM 提供了一个封装的空间来实现这一点。这个“密室”内的元素可以有自己的样式、脚本和结构，而不会干扰主页或其他元素的样式和脚本。我们所指的其他元素就是我们所说的“Light DOM”。
<div>
<p>This is content outside the Shadow DOM, thus "Light DOM".</p>
<my-element></my-element>
</div>
<script>
// 创建一个新的自定义元素
class MyElement extends HTMLElement {
constructor() {
super()
// 为自定义元素创建 Shadow DOM
const shadow = this.attachShadow({ mode: 'open' })
// 在 Shadow DOM 里创建 p 标签
const paragraph = document.createElement('p')
paragraph.textContent = 'Shadow DOM 里的内容'
// 将 p 标签添加到 Shadow DOM
shadow.appendChild(paragraph)
}
}
// 定义自定义元素
customElements.define('my-element', MyElement)
</script>
Shadow DOM 有某些具体的特征：
封装：在 Shadow DOM 里，我们的样式和脚本不会受到外界的影响。此行为有助于防止样式意外与网页上其他元素混淆。除了自定义属性之外，外部 CSS 不会对其产生任何影响。
组合：Shadow DOM 引入了插槽，即迷你占位符，我们可以在其中插入自定义内容。这意味着，我们可以自定义元素的内部，而不会破坏原始设计。
举个栗子，我们将在 WC 内插入 <h2> 和 <p>。它唯一要做的就是，在它们之间放置一个 <hr>。
<my-card>
<!-- Content placed inside the slots -->
<h2 slot="title">Card Title</h2>
<p slot="content">This is the content of the card.</p>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor() {
super()
// 为自定义元素创建 Shadow DOM
const shadow = this.attachShadow({ mode: 'open' })
// 为卡片内容创建容器
const cardContainer = document.createElement('div')
// 为标题创建插槽
cardContainer.innerHTML = `
<slot name="title"></slot>
<hr>
<slot name="content"></slot>
`
// 将卡片容器添加到 Shadow DOM
shadow.appendChild(cardContainer)
}
}
customElements.define('my-card', MyCard)
</script>
现在想象一下 JS 失败了，页面仍然会显示 WC 内部提供的插槽内容，因为这只是一些轻量级 DOM，唯一缺少的是 <hr>。即使我们必须支持不支持此功能的浏览器，它仍然可能是一个渐进增强。
可访性：可访问性是一种共享语言。Shadow DOM 里的元素可以理解并使用与外部元素相同的辅助语言。更重要的是，它确实可以辅助我们处理某些更难访问的用例，比如选项卡。
关注点分离：Shadow DOM 可让我们将结构、样式和行为整齐地排列在各自的分区中。想象一下，拥有一个用于所有这些重复任务的 WC 库：可访问的选项卡、图像缩放和可动画的下拉菜单。我们仍然可以使用自定义属性来设置样式，因为这些属性会渗透到 WC 中。
::part 伪元素：它允许我们从 Shadow DOM 外部设置 WC 的特定命名部分的样式。
举个栗子：
<my-element>
<h2 slot="header">头部内容</h2>
<p slot="content">主内容</p>
</my-element>
这就是我们的 WC 的样子（粉丝请注意 innerHTML 的属性）：
class MyElement extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = `
<style>
div {
border: 3px solid blue;
}
</style>
<div part="header"><slot name="header"></slot></div>
<hr/>
<div part="content"><slot name="content"></slot></div>
`
}
}
customElements.define('my-element', MyElement)
现在解释这一点的最好方法是用边框将其可视化。默认情况下，影子 DOM 内的 <div> 元素具有蓝色边框。我们想要为包裹标题槽的 <div> 提供绿色边框，我们可以访问它：
/* h2 默认样式 */
h2 {
margin-block: 30px;
color: red;
border: 3px solid red;
}
/* 头部的绿色边框 */
my-element::part(header) {
border: 3px solid green;
}
WC 的开发体验
像这样编写 WC 并不是一种很好的开发人员体验……至少在我看来。对于基本示例而言，它似乎工作得很好，但我只是喜欢编辑器中的一些结构和颜色，而不是仅仅将每个输出放入字符串中。
我们可以使用 Lit 库来辅助创建 WC。Lit 库旨在使 WC 的使用更轻松高效。它提供了若干优点，只需以正常方式编写它们就可以减轻一些负担。
Lit 提供了一种更具声明性的语法来定义组件。使用此方法可以使我们的代码更易于理解和管理，而不是直接处理 WC API 时所需的更复杂的样式。它还具有这个简洁的模板系统，结合了 HTML 和 JS 模板字符串，使处理动态内容更加方便。这不仅有助于我们的编辑器中出现某些漂亮的颜色，还有助于其更新策略，即只更新 DOM 中已更改的部分。与手动更新相比，这可以提高性能。
综合考虑所有这些因素，如果您认真对待 WC，我想说值得一看，因为这个库的大小只有 6kb 左右。
本期话题是 —— 您开始使用 Web Components 了吗，有遭遇什么痛点吗？
欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~
《前端 9 点半》每日更新，坚持阅读，自律打卡，每天一次，进步一点。
原文链接：https://juejin.cn/post/7334623638115647499 作者：人猫神话
