你不知道的 Web Components - 过去和未来
内容提要
本文回顾了Web Components的发展历程，从1998年HTML Components雏形到2011年概念提出，历经Shadow DOM V0/V1、Custom Elements V0/V1等规范演进，并探讨了Declarative Shadow Root、Template Instantiation、ElementInternals等未来提案，展望了组件独立化与云组件的可能性。
延伸解读
规范演进中的关键转折
文章梳理了Web Components从1998年HTML Components到2022年的发展，其中Shadow DOM从V0到V1的改进尤为关键。V0中多个shadow root和select选择器的方式不符合开发者习惯，V1引入attachShadow和slot插槽，使规范更合理并被更多厂商接受。这一过程反映了浏览器厂商与社区反馈对标准制定的重要影响。
浏览器厂商的分歧与协作
不同浏览器对Web Components的支持态度不一：Mozilla早期放弃HTML Imports，转向ES Modules；WebKit在Custom Elements升级机制上提出多种提案；Chrome最终废弃HTML Imports。这些分歧推动了规范的完善，如Custom Elements V1的upgrades机制和whenDefined方法，体现了多方博弈下的标准演进。
未来提案的实用价值
文章介绍的Declarative Shadow Root、Template Instantiation、ElementInternals等提案，分别解决服务端渲染、模板复用、表单关联等实际问题。例如Declarative Shadow Root可避免白屏，性能优于脚本方式；ElementInternals让自定义元素能参与表单提交。这些提案虽未完全落地，但为Web Components的扩展提供了方向。
组件独立化的想象空间
文章最后展望了Web Components带来的组件独立性，认为组件可以独立于应用开发、发布和复用，甚至成为“云组件”。这种模式可能改变研发流程，使应用架构更接近无服务。不过，这一愿景依赖于组件托管、动态模块化等基础设施的成熟，目前仍处于概念阶段。
Q&A
Web Components 的概念最早是在哪一年由谁提出的？
Web Components 的概念最早是在2011年由 Alex Russell 提出的，他在 Fronteers 会议上首次演示了 demo，并提出了包括 Scoped CSS、Shadow DOM 和 Web Components 在内的整套技术。
Shadow DOM V0 规范存在哪些问题？
Shadow DOM V0 规范存在多个问题：一个 shadow host 可以支持多个 shadow roots，但这种方式并不直观；使用 select 属性搭配 CSS 选择器来选择子元素内容，不符合用户使用习惯，且 select 只能选择直接子元素，不能选择后代子元素。
HTML Imports 为什么被废弃？
HTML Imports 被废弃的原因主要有两点：一是实践证明它并没有必要，且实现规范很不容易，Mozilla 在 Firefox OS 中使用 Web Components 时发现使用现有的模块语法（如 AMD 或 CommonJS）足够好用；二是 ES6 Modules 的发展，大家更愿意朝模块依赖管理方向优化。
Custom Elements V1 相比 V0 有哪些改进？
Custom Elements V1 相比 V0 引入了新的 customElements.define API，配合 Class 方式构造 CustomElement，并提供了 customElements.whenDefined 方法，引擎层实现了 upgrades 机制，使得自定义元素可以渐进增强。
Declarative Shadow Root 解决了什么问题？
Declarative Shadow Root 解决了两个问题：一是服务端渲染时无法创建 shadow root；二是通过 API 附加 shadow root 会触发重布局，可能导致白屏。它允许在 HTML 解析阶段声明式地创建 shadow root，无需依赖 JavaScript。
Template Instantiation 提案旨在解决什么问题？
Template Instantiation 提案旨在提供标准的 HTML Template 解析器，支持赋值、表达式、事件绑定等，解决当前 template 标签缺乏原生实现导致的模板方言众多、渲染性能受影响、应用体积增大等问题。
ElementInternals 的作用是什么？
ElementInternals 允许 Web Component 与表单挂钩，从而定义自定义值和有效性。通过静态属性 formAssociated 和 attachInternals 方法，组件可以封装表单操作，避免破坏封装隔离性。
Web Components 的未来发展方向有哪些？
Web Components 的未来发展方向包括 Declarative Shadow Root、Template Instantiation、ImportsMap、ElementInternals 等提案，以及组件独立化、云组件等概念，使组件可以独立于应用架构，甚至成为云服务。
