Re: [w3c/webcomponents] Element Behaviors, and the has="" attribute. A useful alternative to Custom Elements in many cases! (#727)

Look how easy it is to define a a new Custom Element with a set of default behaviors in my lib:

```js
import Class from 'lowclass'
import Node from './Node'

// defines the `<i-obj-model>` element, which is short for `<i-node has="obj-model">`
export default
Class('ObjModel').extends( Node, ({ Super }) => ({
    static: {
        defaultElementName: 'i-obj-model',
        defaultBehaviors: [ 'obj-model' ],
    },
}))
```

That defines a Custom Element whose tag name is `i-obj-model`, which has a default `obj-model` behavior.

Here's how we'd use the `obj-model` behavior without the Custom Element:

```html
            <!-- an i-node element with an obj-model behavior. The obj-model
            behavior observes the obj and mtl attributes. -->
            <i-node id="model"
                rotation="0 40 0"
                align="0.5 0.5 0"
                size="0 0 0"
                scale="200 200 200"
                has="obj-model"
                obj="./models/spaceship/ship.obj"
                mtl="./models/spaceship/ship.mtl"
            >
            </i-node>
```

And with the simple Custom Element definition above, here's how we'd use the `i-obj-model` which includes the behavior:

```html
            <!-- alternatively, the i-obj-model is an node element that
            implicityly has an obj-model behavior. We've omitted the mtl, so the
            model will have a random-colored phong material: -->
            <i-obj-model id="model2"
                rotation="0 20 0"
                align="0.5 0.5 0"
                size="0 0 0"
                scale="200 200 200"
                obj="./models/spaceship/ship.obj"
            >
            </i-obj-model>
```

This opens up the doors of composability; ability to compose JS features dynamically (add or remove them any time at runtime).

Just imagine,

```html
<red-monster ...>
```

then a user gets close enough to the monster, so we make it have rage:

```html
<red-monster has="rage-mode" ...>
```

Then the user gets far enough away, so we remove the rage:


```html
<red-monster ...>
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/727#issuecomment-452111406