https://github.com/masx200/custom-elements-random-define
web-components随机定义custom-elements,并且防止重名定义的js库
https://github.com/masx200/custom-elements-random-define
javascript web-components
Last synced: about 1 month ago
JSON representation
web-components随机定义custom-elements,并且防止重名定义的js库
- Host: GitHub
- URL: https://github.com/masx200/custom-elements-random-define
- Owner: masx200
- License: gpl-3.0
- Created: 2019-09-22T02:20:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-10T06:58:02.000Z (over 3 years ago)
- Last Synced: 2024-04-22T22:48:24.352Z (about 2 years ago)
- Topics: javascript, web-components
- Language: TypeScript
- Homepage:
- Size: 214 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# custom-elements-random-define
`web-components` 随机定义 `custom-elements`,并且防止重名定义的 js 库
如果定义重名,则自动使用随机名称定义
由于修改了 `customElements` 的 API,所以需要在最前面引入此模块
# 安装 npm 模块
```powershell
cnpm install --save "@masx200/custom-elements-random-define"
```
或者
```powershell
yarn add "@masx200/custom-elements-random-define"
```
# 使用 npm 模块
```js
import RandomDefine from "@masx200/custom-elements-random-define";
```
# 在浏览器中使用
从 cdn 获取
https://cdn.jsdelivr.net/gh/masx200/custom-elements-random-define@latest/dist/index.min.js
```js
import RandomDefine from "https://cdn.jsdelivr.net/gh/masx200/custom-elements-random-define@latest/dist/index.min.js";
```
# API
```ts
declare var RandomDefine: (
initclass: CustomElementConstructor,
extendsname?: string | undefined
) => string;
```
# 使用方法
## 普通组件
```js
var mycom = class extends HTMLElement {};
const tag = RandomDefine(mycom);
var myele = new mycom();
let inst = document.createElement(tag);
```
## 继承组件
```js
var mycom = class extends HTMLDivElement {};
const tag = RandomDefine(mycom, "div");
var myele = new mycom();
let inst = document.createElement("div", { is: tag });
```