# custom-element-decorator

> @customElement decorator

Latest version **0.6.0** (published 2023-06-25) · 0 weekly downloads

## Install

```sh
npm install custom-element-decorator
pnpm add custom-element-decorator
yarn add custom-element-decorator
bun add custom-element-decorator
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2023-06-25 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | vdegenne |
| Maintainers | vdegenne |

## Links

- npm: https://www.npmjs.com/package/custom-element-decorator
- Repository: https://github.com/vdegenne/custom-element-decorator
- Homepage: https://github.com/vdegenne/custom-element-decorator#readme
- Issues: https://github.com/vdegenne/custom-element-decorator/issues
- npm.io page: https://npm.io/package/custom-element-decorator

## Recent versions

- 0.6.0 (latest) — 2023-06-25
- 0.5.1 — 2023-06-12
- 0.5.0 — 2023-06-12
- 0.4.0 — 2023-06-08
- 0.3.0 — 2023-06-08
- 0.2.0 — 2023-06-06
- 0.1.1 — 2023-06-06
- 0.1.0 — 2023-06-06
- 0.0.9 — 2023-06-06

## README

# @customElement

## Usage

```typescript
import {customElement} from 'custom-element-decorator';

@customElement()
class MySuperCoolElement extends HTMLElement {}

// Now you can use <my-super-cool-element> anywhere in your app.
```
**Important note: The name of your class may change if you use a minifier, that means `<my-super-cool-element>` in this example might be renamed to something else in the build.** In most case it's fine and won't cause any trouble but if you want to force a name you should pass it as an argument:

```typescript
@customElement({ name: 'my-super-cool-element' })
class MyElement extends HTMLElement {}
```

### Injection

Sometimes you don't want to bother finding a special DOM location for your app's custom elements.  
If you create the object programmatically into your code you can pass the `inject` argument to automatically inject the object into the DOM.

```typescript
import {customElement} from 'custom-element-decorator';

@customElement({ inject: true })
class MyServiceElement extends HTMLElement {}

// This object is automatically inserted inside the DOM
// upon creation.
export const service = new MyServiceElement();
```

## Installation

```
npm add -D custom-element-decorator
```

## Bare version

```typescript
import {customElement} from 'custom-element-decorator/bare';

@customElement
class MyElement extends HTMLElement {}
```

## Special thanks

to [Glenn](https://github.com/VandeurenGlenn) for the hyphen idea.  
to [Duske](https://github.com/Duske) for delegating this npm package name to me.

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