Re: [w3c/webcomponents] A new attribute similar to is="", but would allow multiple behaviors to be attached to a given element. (#662)

For anyone interested, I've made an [initial implementation of the `has=""` attribute (let's call it "element behaviors")](https://github.com/trusktr/infamous/blob/1da968561d994faea5f3e4bb429ddc39b18b5d0d/src/html/behaviors/HasAttribute.js) on top of @matthewp's [custom-attributes](https://github.com/matthewp/custom-attributes). I used custom-attributes to define the `has=""` attribute, which defines how the has attribute instantiates behaviors on a given element.

I plan to open a new and more concise issue with a standalone implementation with examples.

If you're curious to try it out, you can install `custom-attributes` in your project, then copy and run that `HasAttribute` file, then you can do something like

```html
<script>
  class Foo {
    constructor(element) {
      // do something with element
    }
    connectedCallback(element) {
      // do something with element
    }
    disconnectedCallback(element) {
      // do something with element
    }
    attributeChangedCallback(element, attributeName, oldValue, newValue) {
      // do something with element's attribute change
    }
  }
  elementBehaviors.define('foo', Foo) // no hyphen required

  class SomeThing { ... }
  elementBehaviors.define('some-thing', SomeThing)
</script>

<div has="foo some-thing" ... ></div>
```

---
---

I'm currently using this to implement the WebGL elements in [my project](https://github.com/trusktr/infamous). For example it looks like this:

```html
        <i-scene experimental-webgl="true">

            <i-node id="light" position="0 0 0">
                <i-point-light position="4 4 4">
                    <i-mesh
                        position="0 0 0"
                        size="4"
                        has="sphere-geometry"
                        color="0.5 0.5 0.5 1">
                    </i-mesh>
                </i-point-light>
            </i-node>

            <i-mesh
                id="first"
                size="2 2 2"
                rotation="30 30 30"
                xhas="sphere-geometry basic-material"
                color="0.5 0.5 0.5 1">

                <p> This is regular DOM content </p>
                <p>TODO throw helpful error when component not used on i-mesh</p>

                <i-mesh id="second"
                    size="1 1 1"
                    xhas="box-geometry basic-material"
                    rotation="30 30 30"
                    color="0.5 0.5 0.5 1"
                    position="1.5 1.5 0" >
                </i-mesh>

            </i-mesh>
        </i-scene>
```

-- 
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/662#issuecomment-340033862