# custom-elements-random-define

**Repository Path**: masx200/custom-elements-random-define

## Basic Information

- **Project Name**: custom-elements-random-define
- **Description**: web-components随机定义custom-elements,并且防止重名定义的js库
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2019-09-22
- **Last Updated**: 2023-02-10

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: Web-components

## 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 });
```