大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

本文作者是 jake lazaroff，大部分内容来自其在2023 年 10 月 25 日发表的文章《Web Components Will Outlive Your JavaScript Framework》。但是对里面很多内容进行了修改、非直译。

正文

很多开发者在开始第一个项目时候都会有技术选型上犹豫不决，比如是使用一个框架，例如：React，Vue 又或者是更时尚的 Svelte 、 Solid、HTMX 还是众多服务端渲染框架？尽管众多国内开发者会认为 React 、Vue是很好的选择，但是 JS Web component 仍然占据了一小部分群体。

当撰写博客文章系列文章时，通常都会包含交互式演示 Demo 来说明一些概念，如下图：

项目有一个指导原则：虽然是用 HTML、CSS 和 JS 构建的，但示例希望给用户展示的是内容，而不是代码。 换句话说，其处理方式与在博客文章中包含的图像或视频类似，还可以移植到能渲染 HTML 的任何地方。

截至 2023 年，该博客是使用 Astro 构建的，更早是用自己的 SSG、然后是 Hugo、接着是用 PHP 编写的自定义 CMS，甚至更早的 Tumblr、Movable Type 和 WordPress。 但是，在可以预见的未来，该博客最终可能也会脱离 Astro 运行，虽然它目前是绝佳方案。

随着技术的发展，在不同系统之间迁移内容已经简单了很多，目前内容通常都是 Markdown 编写的纯文本文件。在不同系统迁移的时候只需要常规的导入导出操作外加一点兼容性修复，站点基本都能正常工作。

而且大多数站点生成器 SSG 都允许在内容中包含更复杂的标记，Astro 也不例外。 MDX 集成允许在 Markdown 文件中渲染 Astro 组件。 这些组件可以访问 Astro 构建系统的所有内容，比如：

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';
// Access passed-in component props, like `<X title="Hello, World" />`
const {title} = Astro.props;
// 访问外部数据源
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- Your template here! -->

使用者可以在一个文件中编写 HTML、CSS 和 JS，Astro 会自动提取和优化内容。 同时限定 CSS 选择器的范围并编译 TypeScript，有条件地渲染标记并执行各种其他操作。

当然，缺点是只能在 Astro 内部运行。 为了切换到不同的站点生成器，必须重写组件。 比如：需要拆分 HTML、CSS 和 JS，或者配置新的构建系统，或者找到一种新的方式来确定样式范围。

但 Markdown 有一个好处：开发者可以在其中编写 HTML！ 这意味着想要添加的任何精美的交互式图表都将与 Markdown 其余部分一样可移植，只要能将其表达为纯 HTML 标签。

Web components 在这一点上完胜 Astro，其是一组用于构建可重用 HTML 元素的 W3C 标准。 开发者可以通过为自定义元素编写类、注册标签名称并在 HTML 标记中使用。 比如下面是之前嵌入像素艺术编辑器的方式：

<pixelart-demo></pixelart-demo>

上面就是在文章的 Markdown 中使用的 HTML。 没有特殊的设置，也不必记住在调用函数或加载一堆额外资源之前在页面上放置特定元素。

当然，确实需要保留 JS 文件并使用 <script> 标记链接。 但这适用于页面任何媒体，确实也需要有某种方法从文本内容中引用。 对于 Web components，一旦加载脚本，标签名称就会注册并在页面上的任何位置可用，即使标记在 JavaScript 运行之前也依然存在。

Web components 将所有 HTML、CSS 和 JS 封装在一个文件中，无需任何构建系统。 将组件的所有代码集中在一个地方可以显著减少负担，并且保证单文件组件的开发体验。虽然 Web components 的编写不如 Astro 或 Svelte 组件那么友好，但仍然非常方便。

如果不熟悉 Web components，下面是 <pixelart-demo> 的组件的代码：

import PixelEditor from './PixelEditor.js';

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

    this.shadow = this.attachShadow({ mode: 'closed' });
    this.render();

    const resolution = Number(this.getAttribute('resolution')) || 100;
    const size = { w: resolution, h: resolution };

    const alice = new PixelEditor(this.shadow.querySelector('#alice'), size);
    const bob = new PixelEditor(this.shadow.querySelector('#bob'), size);

    alice.debug = bob.debug = this.hasAttribute('debug');
  }

  render() {
    this.shadow.innerHTML = `
      <div class="wrapper">
        <canvas class="canvas" id="alice"></canvas>
        <canvas class="canvas" id="bob"></canvas>
        <input class="color" type="color" value="#000000" />
      </div>

      <style>
        .wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr auto;
          gap: 1rem;
          margin: 2rem 0 3rem;
        }

        .canvas {
          grid-row: 1;
          width: 100%;
          aspect-ratio: 1 / 1;
          border: 0.25rem solid #eeeeee;
          border-radius: 0.25rem;
          cursor: crosshair;
        }

        .color {
          grid-column: 1 / span 2;
        }
      </style>
    `;
  }
}

customElements.define('pixelart-demo', PixelArtDemo);

所有内容都包含在一个文件中。 顶部有一个 import，是 ES 模块导入 ，其不依赖于任何构建系统。 只要将所有文件放在一起，浏览器就会自动处理所有内容。

Web components 的另一个好处是影子 DOM，其将组件与周围的页面隔离。 但是缺点是，想要在组件和应用程序的其余部分之间共享样式时，影子 DOM 通常很尴尬。但当确实希望将所有内容隔离时，其是完美的解决方案。 就像图像和视频一样，无论在何处使用，这些组件的外观和行为都基本相同。

而且不仅仅是图像和视频。 Web components 可以公开允许从外部配置属性，可以将它们视为原生 prop。

上面是具有不同强调色的两个 input range。在本例中，只是设置一个 CSS 变量，这是影子 DOM 中允许的少数几个内容之一：

<range-slider style="--accent: #0085F2"></range-slider>

下面是更复杂的示例：

下面是 HTML 内容，它使用属性来改变组件的行为，将分辨率设置为 20 并显示每个像素的调试信息：

<pixelart-demo debug resolution="20"></pixelart-demo>

如果想知道对 getAttribute 和 hasAttribute 的调用在 Web components 中做了什么基本已经清楚了。 当想要重复使用相同的组件时，这特别有用，允许差异化启用某些功能。

值得一提的是，Web Components 使用的是 vanilla JS。 虽然有一些框架可以编译为 Web Components，比如： Lit、Stencil、Svelte 以及其他框架，而且都有很不错的工具，但框架是依赖关系，而依赖关系有很多权衡，比如：可维护性、可持久性等等诸多因素。

这一套理论同样也适用于 TypeScript。 根据统计，TypeScript 的最后 15 个版本已经发生了重大变化，其中诸多新功能虽然很香但是必须更改代码来兼容。 尽管我很喜欢 TypeScript，但 TypeScript 并不是 Web 的原生基础，本质上仍然是一种依赖。

使用依赖项是有成本的。 新版本发布，API 发生变化，需要时间和精力来确保代码保持兼容。 而且成本会随着时间的推移而累积，这种兼容更加复杂，时间成本会更高。

我从事 Web 开发已经近 20 年了，见证了 jQuery 的诞生、兴衰。 Node.js 被创建，分叉为 io.js 并合并回 Node。 Backbone 突然出现，并很快被 AngularJS 取代，AngularJS 又被 React 取代，而 React 在较短的生命周期内已经经历了五种不同的组件编写方式。

随着周围生态的变化，Web 平台本身仍然非常稳定。很大程度上是因为标准的管理者尽力确保没有新的变化会破坏现有的网站。

比如：1996 年的原始太空大灌篮网站仍然存在，并且在现代浏览器中中渲染完美 。

因此，如果想要这种长期的稳定性，需要避免无法控制的依赖，并坚持不会破坏的标准。 如果希望作品在五年、十年甚至二十年内可供访问，则需要使用没有中间层的 Web。 尽管目前存在种种缺陷，但 Web 已经成为所创建的最具弹性、最便携、面向未来的计算平台。希望大家在构建时考虑到这一点！

参考资料

https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/

https://www.reddit.com/r/hackernews/comments/17g84an/web_components_will_outlive_your_javascript/