{"id":19653786,"url":"https://github.com/fightingdesign/web-components","last_synced_at":"2025-04-28T17:31:52.791Z","repository":{"id":61923894,"uuid":"556207369","full_name":"FightingDesign/web-components","owner":"FightingDesign","description":"⚡ 建立在 Web 标准之上的下一代的 UI 组件库。（⚡ Next generation UI component library based on Web standards.）","archived":false,"fork":false,"pushed_at":"2022-11-30T10:09:27.000Z","size":314,"stargazers_count":9,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T10:11:15.106Z","etag":null,"topics":["components","css3","fighting","fighting-design","html5","vite","web","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FightingDesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["Tyh2001"],"open_collective":["FightingDesign"]}},"created_at":"2022-10-23T10:10:13.000Z","updated_at":"2024-09-06T07:48:21.000Z","dependencies_parsed_at":"2023-01-23T18:15:30.965Z","dependency_job_id":null,"html_url":"https://github.com/FightingDesign/web-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FightingDesign%2Fweb-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FightingDesign%2Fweb-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FightingDesign%2Fweb-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FightingDesign%2Fweb-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FightingDesign","download_url":"https://codeload.github.com/FightingDesign/web-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251355478,"owners_count":21576363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css3","fighting","fighting-design","html5","vite","web","web-components"],"created_at":"2024-11-11T15:15:14.619Z","updated_at":"2025-04-28T17:31:52.492Z","avatar_url":"https://github.com/FightingDesign.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Tyh2001","https://opencollective.com/[\"FightingDesign\"]"],"categories":[],"sub_categories":[],"readme":"# Web Components\n\n⚡ 建立在 Web 标准之上的下一代的 UI 组件库。\n\n## 💡 什么是 Web Components？\n\n`Web Components` 是一种全新的组件化概念，比如目前我们在使用的 `vue` 或者 `react` 等框架，在不同的框架中就需要使用到不同的组件库，目前的社区中基本上是 vue 和 react 各一套组件库。但是这样对于组件库的维护成本的很高的。\n\n因为无论是什么前端框架，最终都会被打包成 html、css、js。所以 `web components` 就是来解决上述痛点，使用原生 js 来实现的一种可在任何框架中都可以使用的通用型组件库。\n\n## ✨ 优势\n\n- 💪 建立在 Web 标准之上\n- 🐆 支持广泛\n- 🦩 零第三方依赖\n\n## 🪂 运行\n\n```shell\nclone git@github.com:FightingDesign/web-components.git\n\npnpm i\n\npnpm dev\n```\n\n## 🤟 欢迎加入\n\n目前 `web components` 技术还不算成熟，欢迎感兴趣的同学参与开发！\n\n## 🚀 参考资料\n\n### 文档\n\n- [MDN Web_Components](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)\n- [MDN template](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template)\n- [MDN slot](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/slot)\n- [fast](https://www.fast.design/docs/integrations/vite)\n- [fast 组件文档](https://explore.fast.design/components/fast-button)\n- [fast Github](https://github.com/microsoft/fast)\n- [Github web-component](https://github.com/topics/web-component)\n- [:host()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:host_function)\n- [attachShadow](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow)\n- [host-selectors](https://github.com/mdn/web-components-examples/blob/main/host-selectors/main.js)\n- [nonce](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/nonce)\n- [adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets)\n\n### 其它库参考\n\n- [carbon-web-components](https://web-components.carbondesignsystem.com/)\n- [shoelace](https://shoelace.style/)\n- [ui5-webcomponents](https://sap.github.io/ui5-webcomponents/)\n- [kor](https://kor-ui.com/introduction/welcome)\n- [wired-elements](https://wiredjs.com/showcase.html)\n- [vscode-webview-elements](https://bendera.github.io/vscode-webview-elements/)\n\n### issues 相关\n\n- [core](https://github.com/vuejs/core/pull/4309)\n\n### 其它文章\n\n- [web components 开发踩坑记](https://blog.csdn.net/xiliuhu/article/details/124615237)\n- [Web Components 入门实例教程](https://www.ruanyifeng.com/blog/2019/08/web_components.html)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffightingdesign%2Fweb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffightingdesign%2Fweb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffightingdesign%2Fweb-components/lists"}