[w3c/webcomponents] [idea] Element Behaviors (#727)

Based on #509, #662, and #663, I've released a [standalone implementation](https://github.com/trusktr/element-behaviors) of "Element Behaviors", published to NPM as [element-behaviors](https://www.npmjs.com/package/element-behaviors).

For all intents and purposes, this is an "entity-component" system, but in this case called "element behaviors" which avoids conflict with widely-used term "component" in the web these days.

Element behaviors allow us to add any number of functionalities ("behaviors") to any number of elements, using interfaces similar to Custom Elements, and a new `has=""` attribute. See the README for more details, examples, and API.

This is an alternative to the `is=""` attribute, where instead of using an `is-a` design pattern we're using a `has-a` design pattern which is less complicated and more flexible.

---

For the sake of it, I'll post the first example from the README here:

```html
<script>
    // define an element behavior class
    class ClickLogger {

        constructor( element ) {
            this.handler = () => {
                console.log('Clicked an element: ', element)
            }
        }

        // called when the `element` is added to the DOM
        connectedCallback( element ) {
            element.addEventListener('click', this.handler)
        }

        // called when the `element` is removed from the DOM
        disconnectedCallback( element ) {
            element.removeEventListener('click', this.handler)
        }

    }

    // define the behavior with the class
    elementBehaviors.define('click-logger', ClickLogger)
</script>

<div has="click-logger">one</div>
<p has="click-logger">two</p>
<button has="click-logger">three</button>
```

Also, apply any number of behaviors to any elements:

```html
<div has="click-logger other-behavior">one</div>
<p has="click-logger some-action">two</p>
<button has="click-logger other-behavior some-action">three</button>
```

-- 
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