diff --git a/README.md b/README.md index e9759ee..1933646 100644 --- a/README.md +++ b/README.md @@ -355,87 +355,6 @@ createEffect(() => { }) ``` -## `DefaultBehaviors` (in LUME) - -[LUME](https://lume.io) (a 3D HTML toolkit) uses Element Behaviors, and provides an -additional -[`DefaultBehaviors`](https://github.com/lume/lume/blob/v0.3.0-alpha.14/src/behaviors/DefaultBehaviors.ts) -mixin class that gives Custom Element classes the ability to define which -behaviors they ship with by -default, which is super handy! - -> **Note** Thinking to move DefaultBehaviors to here instead of `lume`. - -To use it first install `lume`: - -```sh -npm install lume -``` - -To define a Custom Element with default behaviors, it is done similarly to with `observedAttributes`: - -```js -import {DefaultBehaviors} from 'lume/dist/behaviors/DefaultBehaviors.js' - -class SomeElement extends DefaultBehaviors(HTMLElement) { - // Define observed attributes - static get observedAttributes() { - return ['some-attribute', 'other-attribute'] - } - - // Define default behaviors that the element will have - static get defaultBehaviors() { - return ['some-behavior', 'click-logger'] - } -} -``` - -Additionally, the `static defaultBehaviors` property can return an object whose -key names are behavior names, and whose values are functions that return `true` or -`false` to determine if a default behavior should be initially added to an -element or not. The function will receive the element, as well as intial -behaviors that the element already has defined by the `has=""` attribute when -the element is created. - -For example, suppose we have the following HTML: - - -```html - - -``` - -We define a Custom Element like: - -```js -class MyEl extends DefaultBehaviors(HTMLElement) { - static get defaultBehaviors() { - return { - 'click-logger': (element, initialBehaviors) => { - // For sake of example, suppose that if the element has - // `another-behavior`, then we do not want it to have the `click-logger` - // behavior: - if (initialBehaviors.includes('another-behavior')) { - return false - } - return true - }, - } - } -} - -customElements.define('my-el', MyEl) -``` - -When the `my-el` elements are created, only the one without the `another-behavior` will have -`click-logger` added to it, so the resulting DOM will be as follows: - - -```html - - -``` - # Contributing First install dependencies: