Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freeshineit/web-components
lit web components
https://github.com/freeshineit/web-components
lit lit-html sass typescript web-component web-component-starter web-components web-components-library web-components-template
Last synced: about 1 month ago
JSON representation
lit web components
- Host: GitHub
- URL: https://github.com/freeshineit/web-components
- Owner: freeshineit
- License: mit
- Created: 2022-11-02T18:36:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T11:30:54.000Z (almost 2 years ago)
- Last Synced: 2024-12-17T00:39:07.694Z (2 months ago)
- Topics: lit, lit-html, sass, typescript, web-component, web-component-starter, web-components, web-components-library, web-components-template
- Language: JavaScript
- Homepage: https://freeshineit.github.io/web-components/
- Size: 989 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Web Components



[Web Components](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components) 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们。
## Scripts
```bash
# development
yarn run dev# production
yarn run build# build document
# https://github.com/http-party/http-server
# version >= 14
yarn run build:doc
cd docs && http-server -p 8080 .
```## Use
> yarn install @skax/web-components
### component
`wc-input`, `wc-button`, `wc-list`
### html
```html
Submit
Rest```
### react
```tsx
import '@skax/web-components'
// import '@skax/web-components/es/button'function App() {
return Button;
}
```如果使用了 typescript,在 `react-app-env.d.ts`中添加下面声明。
```ts
///export declare global {
namespace JSX {
interface IntrinsicElements {
"wc-button": WCButtonElement;
"wc-input": WCInputElement;
"wc-list": WCListElement;
}
}
}
```[example](https://codesandbox.io/s/adoring-cdn-f7h4li)
### vue3
```vue
import '@skax/web-components'
// import '@skax/web-components/es/button'Button
```
[example](https://codesandbox.io/s/cool-cannon-5ou03c)