大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
前端进阶
当开发人员第一次查看网站时，他们通常会看到一个 HTML 模板，就像下面这样（当然还包括JavaScript 和CSS：
但是结合 HTML 和 JS 会使得开发变的困难，因为它需要大量的时间、精力和难以维护的代码。尤其是当您想做复杂的事情时，例如构建 Web 网格组件、Web 组件图表和图形等等。
这就是出现 TypeScript（或 JavaScript）和各种 Web 应用程序框架的原因。他们有许多预定义的功能，可以在处理新项目时使用。但随之而来的是下一个挑战，即学习曲线。您必须掌握特定的编程技能，才能使用 Angular、React、jQuery、Blazor 等框架并开发您需要的组件。
图片来自“Shanika Wickramasinghe”的《Web Components as Technology》
现在这些事情可以在没有框架的情况下完成，也不必了解所有模块、编码语言和集成背后的复杂性，这要归功于 Web Components。
以下是您将在本文中学到的内容。
Web Components是一种浏览器原生 HTML 和 JavaScript 技术，用于创建自定义 UI 元素，例如按钮、小部件widget等，或用于构建整个屏幕、页面和应用程序。它的伟大之处在于封装的功能不同于其余代码以及
但是不要将 Web Components 与框架或渲染库混淆，因为 Web Components 不属于这些技术类别。把它看作如下几种技术可能更加合理：
标准 Web Components的概念相对较新，由Alex Russell 在 2011 年的 Fronteers 会议上首次提出，在过去十年中发生了重大变化，为开发人员（尤其是新手）提供了一种简化现代 Web 应用程序创建方式的方法。在谈论 Web Components时，我们实际上是在谈论它基于的三种不同规范：
自定义元素：一组 JavaScript API，允许创建新的 HTML 标记、改进现有标记、定义自定义元素行为以及扩展由其他程序员构建的组件，以便达成UI 最佳匹配。自定义元素有自己的语义和标记，并且没有第三方框架存在。
Shadow DOM ： 分离 CSS 和 JavaScript 并提供封装能力。通过这种方式，您可以将自定义的元素标记结构、样式和行为与页面上的其他代码隔离开来，确保不同部分不会发生冲突，同时保持代码整洁。使用 Shadow DOM API，您还可以将隐藏的 DOM 附加到给定元素。
HTML 模板：在自定义元素中使用 允许您创建带有动态内容的标记模板，这些模板不会在页面加载时立即呈现。可以重复使用多次，并在运行时调用。还有所谓的
Web Components 可用于真实生产环境，同时它会继续发展和进步，因此开发人员可以在未来获得更多优势。但是 Web Components 有什么好处呢？如果您想知道它们究竟如何增强现代 Web 开发，请记住以下几点。
使用 Web Components，您可以利用小型、可重用的模块化元素，这些元素可以轻松融入 Web 应用程序并缩短开发时间。由于它是可交叉共享的并且不依赖于任何技术栈，Web Components 可以应用于不同框架编写的许多项目。例如，从 Angular 项目切换到 React 项目。
Web Components的所有部分都在浏览器中工作，从而可以自定义元素到插槽。这对于静态站点开发非常有用，它几乎不需要任何工具，只需规范即可轻松构建。
经验不足的开发人员无需学习整个 JavaScript 库即可开始编写代码。Web Components的出现提供了每个人都能理解并在实践中应用的规范。
HTML Web Components 具有较好的可访问性，自定义内置元素可以扩展本机 HTML 元素（比如：输入框、选择、按钮），同时继承其所有的功能和特性。
Web Components 使用 HTML、CSS 和 JavaScript 开发，在不同的浏览器上具有较好的兼容性 。Web Components 已经在 Chrome 和 Safari（2016 年）、Firefox（2018 年）和 Edge（2020 年）等浏览器中得到支持。 Microsoft Edge 和 Internet Explorer 11 等旧版浏览器的向后兼容性也是使用基于 JavaScript 的 polyfill 实现的。此外，任何基于 Web 组件标准构建的自定义组件和小部件widget都可以与所有使用 HTML 的 JavaScript 库或框架一起使用。
Web Components 的 Shadow DOM 提供了一种封装机制。它可以分离样式、脚本和 HTML 标记，因此组件的内容不会被外部文档以任何方式破坏。这使得前端模块化开发变得简单快捷。
有一些很棒的 Web Components示例，其形式为 Web 组件库或由一些科技巨头和行业名称创建的 Web 组件框架。比如微软的 FAST组件， Salesforce开发的Lightning Web Components ，当然还有Google的 Polymer项目。
Angular、React、jQuery以及其他框架已经出现在市场上很多年了，而 HTML Web Components 被视为一种新兴趋势。但是如何比较，以及开发人员如何看待 Web Components vs Angular 和 Web Components vs React 之争？
首先需要说明 Web Components 、 Angular 或 React 解决问题的思路是不一样的。框架提供了丰富的库，使 DOM 与数据保持同步，而 Web Components允许封装并提供跨不同项目和平台使用的可操作元素。
框架有一个陡峭的学习曲线。您需要获得某些技术技能才能正确使用它们，而 Web Components 为单一编程语言引入了模块化方法。为给定框架开发的组件几乎不适合另一个框架，而Web Components利用浏览器内置的 Web API可以做到与框架无关。
使用 Web Components 会带来一些样式方面的困难，因为它缺少主流程序开发框架所具有的数据绑定和状态管理等功能。React、Angular和其他广泛采用的应用程序开发平台的生态非常强大。它们得到社区的支持，并获得不断发展的工具和库。
当然，每个方案都有其优点和缺点。好消息是框架和 Web Components的未来都是光明的。它们将不断更新迭代，以便前端开发变得越来越精简和高效。
本着为现代 Web 应用程序提供尖端开发工具的想法，我们发布了 Ignite UI for Web Components库。使用它，您可以构建高级 Web 应用程序，这些应用程序受益于在面向未来的应用程序开发策略中使用无依赖组件。
https://www.infragistics.com/community/blogs/b/jason_beres/posts/what-are-web-components
https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid
https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/charts/chart-overview
https://www.infragistics.com/products/ignite-ui-web-components/
https://medium.com/front-end-weekly/web-components-as-technology-38c5340d89ef
页面更新：2024-03-13
本站资料均由网友自行发布提供，仅用于学习交流。如有版权问题，请与我联系，QQ：4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号
