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: 2 days 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-27T11:30:54.000Z (over 1 year ago)
• Last Synced: 2024-10-12T18:06:16.899Z (about 1 month 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

![build](https://github.com/freeshineit/web-components/workflows/build/badge.svg)

![Download](https://img.shields.io/npm/dm/@skax/web-components.svg)

![Version](https://img.shields.io/npm/v/@skax/web-components.svg)

![License](https://img.shields.io/npm/l/@skax/web-components.svg)

[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)