# web-component-define

> I've shared this across many projects. I like it *shrug*

Latest version **2.0.11** (published 2023-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install web-component-define
pnpm add web-component-define
yarn add web-component-define
bun add web-component-define
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.11 |
| Published | 2023-09-03 |
| First published | 2023-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 237.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | KonnorRogers |
| Maintainers | konnor_rogers |
| Keywords | web-components |

## Links

- npm: https://www.npmjs.com/package/web-component-define
- Repository: https://github.com/KonnorRogers/web-component-define
- Issues: https://github.com/KonnorRogers/web-component-define/issues
- npm.io page: https://npm.io/package/web-component-define

## Dependencies (2)

- [@lit/reactive-element](https://npm.io/package/@lit/reactive-element.md) ^1.6.1
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.1

## Recent versions

- 2.0.11 (latest) — 2023-09-03
- 2.0.10 — 2023-06-04
- 2.0.9 — 2023-06-03
- 2.0.8 — 2023-06-02
- 2.0.7 — 2023-06-02
- 2.0.6 — 2023-06-01
- 2.0.5 — 2023-05-30
- 2.0.4 — 2023-05-30
- 2.0.3 — 2023-05-30
- 2.0.2 — 2023-05-30
- 2.0.0 — 2023-05-30
- 1.0.2 — 2023-05-28
- 1.0.1 — 2023-05-28
- 1.0.0 — 2023-05-28

## README

# Purpose

I've shared this across many projects. I like it *shrug*

## Installation

```bash
npm install web-component-define
```

## Import

### Base class

```js
import { DefineableElement } from "web-component-define"

class MyCard extends DefineableElement {
  static baseName = "my-card"
}

// Register the class
MyCard.define() // <my-card>
// Register with a different name
MyCard.define("my-card-2") // <my-card-2>
// Register with different options
MyCard.define(MyCard.baseName, MyCard, { extends: { "div" }})
// This will do the same as above
MyCard.define(null, null, { extends: { "div" }})
```

### Usage as a mixin

```js
import { LitElement } from "lit"
import { DefineableMixin } from "web-component-define"

export class BaseElement extends DefineableMixin(LitElement) {}

class MyCard extends BaseElement {
  static baseName = "my-card"
}

MyCard.define()
```

## Warn if element exists already

```js
import { DefineableElement } from "web-component-define"

class MyCard extends DefineableElement {
  static baseName = "my-card"
  static warnOnExistingElement = true
}
```

## Scoped Elements Mixin

### With regular element

```js
import { CreateRenderRootMixin, ScopedElementsMixin } from "web-component-define"
export class BaseElement extends DefineableMixin(CreateRenderRootMixin(ScopedElementsMixin(HTMLElement))) {
  static get scopedElements () {
    return {
      "my-header": MyHeader
    }
  }
}

BaseElement.define()
```

For more on defined scope elements, check out this page: <https://open-wc.org/docs/development/scoped-elements/>

### With Lit

```js
import { LitScopedElementsMixin } from "web-component-define/exports/lit.js"
export class BaseElement extends LitScopedElementsMixin(LitElement) {}
```

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