Web Component 揭秘：原生 JavaScript 构建组件的奥秘
2023-12-09 22:00:26
作为一名身经百战的前端工程师，组件是我们的老朋友。我们借助诸如 React、Vue 等框架使用过不少第三方组件库，譬如 Ant Design、Element UI 和 iView，或者基于它们进行了组件的二次开发，包括业务组件、UI 组件等等。或许，你还觉得团队能力超强，完全可以独立开发组件，无需借助第三方组件库。不管怎样，我们都离不开组件。
在这场组件开发之旅中，我们无法绕过 Web Components 技术，它为我们提供了构建原生 JavaScript 组件的强大能力，让我们能够随心所欲地创建定制元素、Shadow DOM，将组件的封装性、可重用性、可组合性发挥得淋漓尽致。
为了深入剖析 Web Components 的技术奥秘，我们先从它的缘起说起。作为 HTML 和 CSS 的忠实伴侣，JavaScript 一直以来都被用来为网页添加交互性，但由于缺少组件的概念，开发者们往往需要重复造轮子，组件的封装和重用十分困难。为了解决这个问题，Web Components 应运而生。
Web Components 是一个集合了四项规范的技术：Custom Elements、Shadow DOM、HTML Imports 和 Template，它们齐心协力，赋予我们构建原生 JavaScript 组件的超能力。
- Custom Elements：允许我们定义自己的 HTML 元素，并指定其行为和样式。
- Shadow DOM：为组件创建隔离的 DOM 树，使组件的样式和脚本不会影响到页面其他部分。
- HTML Imports：支持将外部 HTML 文件导入到当前文档中，方便组件的模块化开发。
- Template：允许我们定义 HTML 模板，并在需要时动态生成 DOM 元素。
掌握了 Web Components 的核心技术后，我们就可以开始组件开发之旅了。接下来，让我们一起动手构建一个简单的 Web Component。
class MyButton extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadow.innerHTML = `
<button>
<span>Click me</span>
</button>
`;
this.shadow.querySelector('button').addEventListener('click', () => {
alert('Button clicked!');
});
}
}
customElements.define('my-button', MyButton);
这段代码定义了一个名为 MyButton 的 Web Component，它包含了一个按钮，当按钮被点击时，会弹出 "Button clicked!" 的提示。
将这段代码保存为一个单独的文件，并将其导入到 HTML 页面中。之后，你就可以在页面中使用
<!DOCTYPE html>
<html>
<head>
<script src="my-button.js"></script>
</head>
<body>
<my-button></my-button>
</body>
</html>
现在，你就可以在页面中看到一个按钮了，当点击按钮时，它会弹出 "Button clicked!" 的提示。
以上就是 Web Components 的基本用法，当然，它还有很多其他高级用法，比如使用 Shadow DOM 来实现组件的样式隔离，使用 HTML Imports 来实现组件的模块化开发等等。
Web Components 的出现为我们带来了原生 JavaScript 组件开发的新范式，它让我们能够创建更强大、更灵活、更易于维护的组件，从而构建出更强大的 Web 应用。
