https://github.com/fightingdesign/web-components

⚡ 建立在 Web 标准之上的下一代的 UI 组件库。（⚡ Next generation UI component library based on Web standards.）
https://github.com/fightingdesign/web-components

components css3 fighting fighting-design html5 vite web web-components

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fightingdesign/web-components
• Owner: FightingDesign
• License: mit
• Created: 2022-10-23T10:10:13.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-11-30T10:09:27.000Z (almost 2 years ago)
• Last Synced: 2024-10-24T10:06:44.965Z (22 days ago)
• Topics: components, css3, fighting, fighting-design, html5, vite, web, web-components
• Language: TypeScript
• Homepage:
• Size: 307 KB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Web Components

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

## 💡 什么是 Web Components？

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

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

## ✨ 优势

- 💪 建立在 Web 标准之上

- 🐆 支持广泛

- 🦩 零第三方依赖

## 🪂 运行

```shell

clone [email protected]: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)