【译文】HTML 网页组件和 React 组件
内容提要
本文讨论了网络组件和React组件之间的区别，网络组件更倾向于增强而不是替代，可以在JavaScript之前渲染。增强型方法在网络上最有效，因为网络的纹理鼓励通过增强来提高适应能力。最佳的技术方法是增强和强化而不是替代。
延伸解读
理解“纹理”：为何Web组件与React组件设计逻辑不同
文章用“纹理”比喻技术平台的内在倾向。React组件鼓励“替换思维”，用JavaScript重新实现一切；而Web组件的纹理更倾向于“增强”，即用自定义元素包裹并强化现有HTML内容。这种差异并非优劣，而是设计优先级的区别。若强行用React方式构建Web组件，容易因两者工作模式不同而感到挫败。理解这一点，有助于开发者选择更贴合平台特性的实现路径。
HTML网页组件与JavaScript网页组件的关键分野
文章区分了两种Web组件：JavaScript网页组件是空元素，完全依赖JavaScript渲染内容，无JS则无意义；HTML网页组件则用自定义元素扩展已有标记，如<user-avatar>内包含<img>，无JS时仍有内容，有JS时功能更丰富。这种“增强”模式提升了可组合性与渐进增强能力，也让组件在JavaScript加载前即可呈现核心内容，对性能与可访问性更友好。
增强而非替代：Web平台长盛不衰的技术策略
文章以HTML5增强HTML4、fetch吸收XHR最佳创意、Sass和jQuery理念进入浏览器等为例，说明Web平台倾向于将外部框架的优秀思想融入标准，而非彻底取代现有技术。这种增强型方法适应Web的迭代节奏，也更容易长期存活。作者由此得出启示：选择增强和强化的技术路径，比选择替代路径更符合Web的纹理，也更可能持久。
Q&A
Web Components 和 React 组件在设计理念上有什么根本区别？
Web Components 更倾向于增强现有内容，而不是替代；React 组件则鼓励替换思维，用 JavaScript 重新实现所有功能。Web Components 可以在 JavaScript 之前渲染，鼓励使用 HTML 组成核心内容，再通过自定义元素增强。
什么是 HTML Web Component？它和 JavaScript Web Component 有什么区别？
HTML Web Component 使用自定义元素来扩展现有标记，核心内容由 HTML 构成，即使没有 JavaScript 也有意义和内容；JavaScript Web Component 是一个空元素，其功能和内容完全依赖于 JavaScript，没有 JavaScript 对用户毫无意义。
为什么说增强型方法在 Web 上长期有效？
因为 Web 的纹理鼓励通过增强来提高适应能力，并且这是迭代改变像 Web 这样庞大系统的最佳方式。历史上 HTML5 增强而非取代 HTML4、fetch 标准吸收网络库的最佳创意等都是例证。
Web Components 如何鼓励可组合性设计？
Web Components 鼓励使用 HTML 组成核心内容，然后将其封装在自定义元素中，通过附加功能来增强内容，而不是创建一个完全由 JavaScript 渲染的空壳组件。
文章中提到哪些技术是通过增强而非替代的方式发展的？
HTML5 增强 HTML4、fetch 标准吸收网络库的最佳创意、Sass 和 jQuery 的最佳创意被移植到浏览器、TypeScript 的最佳创意也将被移植到浏览器，以及 React 的组件模型被移植到浏览器中增强 Web 现有工作方式。
作者从 Web Components 和 React 的对比中得出了什么启示？
如果想长盛不衰，就应该选择增强和强化的技术方法，而不是替代。Web 的纹理就是朝着增强的方向排列的。
