web-components

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 9 Open GitHub ↗

⚡ 建立在 Web 标准之上的下一代的 UI 组件库。（⚡ Next generation UI component library based on Web standards.）

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Web Components

⚡ 建立在 Web 标准之上的下一代的 UI 组件库。

## 💡 什么是 Web Components？

`Web Components` 是一种全新的组件化概念，比如目前我们在使用的 `vue` 或者 `react` 等框架，在不同的框架中就需要使用到不同的组件库，目前的社区中基本上是 vue 和 react 各一套组件库。但是这样对于组件库的维护成本的很高的。

因为无论是什么前端框架，最终都会被打包成 html、css、js。所以 `web components` 就是来解决上述痛点，使用原生 js 来实现的一种可在任何框架中都可以使用的通用型组件库。

## ✨ 优势

- 💪 建立在 Web 标准之上
- 🐆 支持广泛
- 🦩 零第三方依赖

## 🪂 运行

```shell
clone git@github.com:FightingDesign/web-components.git

pnpm i

pnpm dev
```

## 🤟 欢迎加入

目前 `web components` 技术还不算成熟，欢迎感兴趣的同学参与开发！

## 🚀 参考资料

### 文档

- [MDN Web_Components](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)
- [MDN template](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template)
- [MDN slot](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/slot)
- [fast](https://www.fast.design/docs/integrations/vite)
- [fast 组件文档](https://explore.fast.design/components/fast-button)
- [fast Github](https://github.com/microsoft/fast)
- [Github web-component](https://github.com/topics/web-component)
- [:host()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:host_function)
- [attachShadow](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow)
- [host-selectors](https://github.com/mdn/web-components-examples/blob/main/host-selectors/main.js)
- [nonce](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/nonce)
- [adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets)

### 其它库参考

- [carbon-web-components](https://web-components.carbondesignsystem.com/)
- [shoelace](https://shoelace.style/)
- [ui5-webcomponents](https://sap.github.io/ui5-webcomponents/)
- [kor](https://kor-ui.com/introduction/welcome)
- [wired-elements](https://wiredjs.com/showcase.html)
- [vscode-webview-elements](https://bendera.github.io/vscode-webview-elements/)

### issues 相关

- [core](https://github.com/vuejs/core/pull/4309)

### 其它文章

- [web components 开发踩坑记](https://blog.csdn.net/xiliuhu/article/details/124615237)
- [Web Components 入门实例教程](https://www.ruanyifeng.com/blog/2019/08/web_components.html)

web-components

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README