# wc-comp

> ``` * 跨框架。无论是`react`、`vue`还是原生项目均可使用。 * 组件化。`shadow dom`真正意义上实现了样式和功能的组件化。 * 类原生。一个组件就像使用一个`div`标签一样。 * 无依赖。纯原生，无需任何预处理器编译。 * 无障碍。支持键盘访问。 ```

Latest version **1.0.2** (published 2021-12-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install wc-comp
pnpm add wc-comp
yarn add wc-comp
bun add wc-comp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-12-29 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 740.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leolee18 |

## Links

- npm: https://www.npmjs.com/package/wc-comp
- npm.io page: https://npm.io/package/wc-comp

## Recent versions

- 1.0.2 (latest) — 2021-12-29
- 1.0.1 — 2021-12-29

## README

# wc-comp-ui

## 特性
```
* 跨框架。无论是`react`、`vue`还是原生项目均可使用。
* 组件化。`shadow dom`真正意义上实现了样式和功能的组件化。
* 类原生。一个组件就像使用一个`div`标签一样。
* 无依赖。纯原生，无需任何预处理器编译。
* 无障碍。支持键盘访问。
```

## 兼容性
```
现代浏览器。

包括移动端，不支持`IE`。

> `IE`不支持原生`customElements`，[webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)可以实现对`IE`的兼容，不过很多`CSS`特性仍然无效，所以放弃
```


## 安装

* npm
```shell
npm i wc-comp
```

目录如下：

```text
.
└── my-comp
    ├── components //功能组件
    |   ├── wc-icon.js
    |   └── ...
    ├── iconfont //图标库
    |   └── icon.svg
    ├── css //样式
    |   └── common.css
    ├── utils
    |   ├── app.js
    |   └── ...
    └── index.js
```
     
将整个文件夹放入项目当中（可选择以上几个目录文件即可，其他文件夹均为文档测试）。


## 其他

大部分情况下，可以把组件当成普通的`html`标签，

比如给`<wc-button>button</wc-button>`添加事件，有以下几种方式

```html
<wc-button onclick="alert(5)">button</wc-button>
```

```js
btn.onclick = function(){
    alert(5)
}

btn.addEventListener('click',function(){
    alert(5)
})
```

> 自定义事件只能通过`addEventListener`绑定

比如元素的获取，完全符合`html`规则

```html
<wc-tab>
    <wc-tab-content label="tab1">tab1</wc-tab-content>
    <wc-tab-content label="tab2">tab2</wc-tab-content>
    <wc-tab-content label="tab3" id="tab3">tab3</wc-tab-content>
</wc-tab>
```

```js
const tab3 = document.getElementById('tab3');
tab3.parentNode;//wc-tab
```

组件的布尔类型的属性也遵从原生规范（添加和移除属性），比如

```html
<wc-dialog show></wc-dialog> <!-- 显示 -->
<wc-dialog></wc-dialog> <!-- 隐藏 -->
<wc-button loading>button</wc-button> <!-- 加载中 -->
<wc-button>button</wc-button> <!-- 正常 -->
```

总之，大部分情况下把它当成普通的`html`标签（不用关注shadow dom的结构）就好了，以前怎么做现在仍然怎么做，只是新增了方法而已。

---
_Source: https://npm.io/package/wc-comp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._