# custom-element-base

> A base component for declaring custom elements

Latest version **2.0.0** (published 2015-10-24) · MIT license · 0 weekly downloads

## Install

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

## 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 | 2.0.0 |
| Published | 2015-10-24 |
| First published | 2015-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | steelbrain |
| Maintainers | steelbrain |
| Keywords | browser, html5 |

## Links

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

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2015-10-24
- 1.0.2 — 2015-10-23
- 1.0.1 — 2015-10-23

## README

Custom-Element-Base
==================

Custom-Element-Base is a base module that allows its consumers to painlessly define custom elements. It automatically manages the config attributes and their type-conversion. You can focus on doing your part and leave the rest to it.

#### Features

  - Less than 2 kb minified
  - Provides config management
  - Provides types for configs
  - Allows JSON types
  - Automatically matches HTML attributes with element properties
  - Automatically extracts initial attributes into config

#### API

```js
type Config<T> = {
  type: enum<T>{ Object, String, Number, Boolean, 'JSON' },
  default: T
}
function registerCustomElement({
  name: String,
  ?created: Function,
  ?initialize: Function,
  ?attached: Function,
  ?detached: Function,
  ?attributeChanged: Function,
  ?config: Array<string, Config>
  .... // <-- any other properties will be copied directly to that element's prototype
})
```

#### Examples

```js
const MyElement = registerCustomElement({
  name: 'my-element',
  initialize: function() {
    console.log(this.super, this.name)
  },
  config: {
    super: {type: Boolean, default: true}
    name: {type: String}
  }
})
const el = new MyElement() // or document.createElement('my-element')
el.name = 'SteelBrain'
document.body.appendChild(el)
// true, 'SteelBrain' <-- will be logged to dev console
```

#### Notes

  - If no default is specified and value is not given, null is returned in getter
  - JSON attributes are removed from DOM immediately after use but are still present in the element object
  - Object attributes are not set or removed from DOM
  - Config keys are lowercased to match HTML behavior

#### LICENSE

This project is licensed under the terms of MIT License

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