web components

Web Components 是什么Web Components 是一套不同的 web 标准，它们允许开发者创建可重用的自定义元素（通过封装 JavaScript 类来定义），这些元素封装了 HTML、CSS 和 JavaScript。

Stencil web component 组件库样式主题设计最近在研究如何使用 Stencil.js 搭建一个不依赖于框架的 web component 组件库，在实现样式主题功能，参考Element Plus的样式方案，主要利用Sass变量和CSS变量，并使用BEM（Block Element Modifier）规范，实现了一个可扩展、可维护的组件库样式系统，不仅提升了组件库的开发效率，还能轻松实现组件库换肤功能

探索Web Componentstitle: 探索Web Components date: 2024/6/16 updated: 2024/6/16 author: cmdragon

Stencil 搭建 Web Component 组件库项目(工作原理解析）在之前介绍了 Web Component 组件库有什么优势，这篇讲一下如何使用 Stencil 搭建 web component 组件库

Web Component 组件库有什么优势前端目前比较主流的框架有 react，vuejs，angular 等。我们通常去搭建组件库的时候都是基于某一种框架去搭建，比如 ant-design 是基于 react 搭建的UI组件库，而 element-plus 则是基于 vuejs 搭建的组件库。

组件库的新选择-Banana UI，一套原生跨框架的组件库Github: github.com/FriedRiceNo…官方文档: banana-ui.com/

都2024年了，还不知道 Web Components 呢！网络技术的快速发展，带来了层出不穷的新概念和框架，尤其是在前端开发领域，新技术的出现如同浪潮般一波接一波，例如 Vue3 和 Vite 的组合。而在这种技术快速更新的环境中，Web Components 作为一项已经存在一段时间的技术，为什么仍然值得我们深入学习和探讨呢？

穷人小水滴

使用 Web Components 实现输入法更换皮肤 (vue)更换皮肤 (界面外观) 是拼音输入法的常见功能.要实现更换皮肤, 有许多种不同的具体技术方案可以使用. 本文选择 Web Components 技术 (vue) 来实现这个功能.

聊一聊WebComponent｜原生JS自定义组件首先 WebComponent 直译过来第一感觉是 web 组件的意思，实际上它是 HTML5 推出的一个新特征，在这个依赖前端框架的时代，更推崇组件化开发的思想来编写页面。

关于 REST API 和 SOAP，你知道多少？通过上篇文章关于 REST API，你了解多少？，我们知道REST API是在Web应用程序的发展过程中产生的。在Web应用程序的早期阶段，应用程序之间的通信主要是通过SOAP（Simple Object Access Protocol）和XML-RPC（XML Remote Procedure Call）等协议来实现的。这些协议使用XML格式来传输数据，但它们的设计复杂、繁琐，不易于使用和扩展。

Web Components：重塑前端开发的未来Web Components代表了一种将网页开发向前推进的技术，它允许开发者创建可重用、封装良好的自定义元素，这些元素在任何现代浏览器中都能够运行。通过Web Components，开发者可以构建出真正意义上的组件化前端应用。

大家的林语冰

Web Components，启动！大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。免责声明本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Getting into web components - an intro。

Web 组件入门指南为组织的组件库注入和谐：这是我们的 Web 组件指南，教您如何开始定义自己的组件。译自Introduction to Web Components and How to Start Using Them，作者 David Eastman 曾是一名在伦敦工作的专业软件开发人员，曾在 Oracle Corp. 和英国电信公司担任职务，并担任顾问，帮助团队更加敏捷地工作。

梦想很大很大

这里有从零开始构建现代化前端UI组件库所需要的一切（五）到《这里有从零开始构建现代化前端UI组件库所需要的一切（四）》为止，其实我们已经基本上实现了现代化前端 UI 组件库所需的基础框架和功能，其中包括设计理念选择、工程结构建设、开发流程优化、自动化测试、文档生成、版本管理、发布等方面的内容。当然在这个阶段，我们仍然可以在一些方向上来进一步完善和优化我们的组件库：

梦想很大很大

这里有从零开始构建现代化前端UI组件库所需要的一切（四）在上一篇《这里有从零开始构建现代化前端UI组件库所需要的一切（三）》中，我们实现了一套高效的版本管理和发布的解决方案，其实到这里我们组件库的架构基本上就差不多了（当然如果有遗漏欢迎留言补充），接下来的几篇文章，我们会首先为组件库搭建一个文档网站，然后再扩展一些组件开发中的一些基础功能（CSS、主题等）。

Web Components从技术解析到生态应用个人心得指北Web Components 是一种使用封装的、可重用的 HTML 标签、样式和行为来创建自定义元素的 Web 技术。

梦想很大很大

这里有从零开始构建现代化前端UI组件库所需要的一切（三）我们接着上一篇《这里有从零开始构建现代化前端UI组件库所需要的一切（二）》继续，在这一篇文章里我们将主要为我们的组件库实现一套高效的版本管理和发布解决方案。

梦想很大很大

这里有从零开始构建现代化前端UI组件库所需要的一切（二）在《这里有从零开始构建现代化前端UI组件库所需要的一切（一）》中，我们已经确定了项目的组织策略和构建工具（Monorepo：pnpm Workspace&turborepo），也为组件提供了一个专业的开发环境（Storybook），接下来我们将为组件库添加代码打包的功能。

梦想很大很大

这里有从零开始构建现代化前端UI组件库所需要的一切（一）在现代前端开发中，构建一个强大而现代化的UI组件库是许多开发者追求的目标之一。这不仅是技术的展示，更是一项对用户体验和开发效率的投资。从零开始搭建一个UI组件库项目架构，可能看似繁琐，但正是这个过程，让我们深刻理解了组件化、可维护性和可扩展性的重要性。本文将带领你探索这个激动人心的旅程，揭示构建现代化前端UI组件库所需的一切。