# register-behavior

> Registers a new Web Behavior. Web Behaviors are special attributes which, when added to an DOM element, extend the behavior of this element. They are a complement to Web Components.

Latest version **0.0.2** (published 2016-03-06) · 0 weekly downloads

## Install

```sh
npm install register-behavior
pnpm add register-behavior
yarn add register-behavior
bun add register-behavior
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2016-03-06 |
| First published | 2016-03-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chalbert |

## Links

- npm: https://www.npmjs.com/package/register-behavior
- npm.io page: https://npm.io/package/register-behavior

## Recent versions

- 0.0.2 (latest) — 2016-03-06
- 0.0.1 — 2016-03-05

## README

# registerBehavior

Registers a new Web Behavior. Web Behaviors are special attributes which, when added to an DOM element, extend the behavior of this element. They are a complement to Web Components.

At this point, `registerBehavior` is still considered highly experimental.

## Register a behavior

```
registerBehavior('toggle-bold', {
    prototype: {
        attachedCallback() {
            this.toggleBold = this.toggleBold.bind(this);
            this.target.addEventListener('click', this.toggleBold);
        },
        detachedCallback() {
            this.target.removeEventListener('click', this.toggleBold);
        },
        toggleBold() {
            this.target.style.fontWeight = (this.target.style.fontWeight === 'bold' ? '' : 'bold');
        }
    }
});
```

The name of a behavior must respect the same rule as for Custom Element names. In summary, it must only contain lower
case letters, numbers, at least 1 hyphen and must start by a letter. See https://www.w3.org/TR/custom-elements/#dfn-custom-element-type.

For a more compact declaration, use a `class`.

```
registerBehavior('toggle-bold', class {
   attachedCallback() {...}
});
```

## Use a behavior

```
<button toggle-bold>Toggle bold</button>
```

## Callbacks

The callback are always triggered asynchronously.

### attachedCallback()

Callback when the behavior's attribute is added to a DOM element, or when an element with a behavior's attribute is
added to the DOM.

### detachedCallback()

Callback when the behavior's attribute is removed from a DOM element, or when an element with a behavior's attribute is removed from the DOM.

### attributeChangedCallback(attributeName, oldValue, newValue)

Callback when an attribute changes on the same element on which the behavior is attached.

## Browser support

As `registerBehavior` depends on `MutationObserver`, it will work on every browser that supports it. See http://caniuse.com/#search=MutationObserver. If support for older browser is desired, it is possible to use a [polyfill](https://github.com/Polymer/MutationObservers), although it will have performance implication.

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