Purpose

For creating bindings on a StacheElement for attributes and properties. If you set an attribute that will be reflected within the StacheElement properties.

Pass Conversion object

It is possible to pass a conversion object for attributes that need to be parsed before setting the property, the passed object can be any object that has parse and stringify functions, such as the global JSON object.

<my-el person="{'firstname': 'Cherif', 'age': 37}"></my-el>

<script type="module">
import { fromAttribute, StacheElement } from "can";

class MyElement extends StacheElement {
    static view = `
        <p>{{this.firstname}}</p>
        <p>{{this.age}}</p>
    `;
    static props = {
        person: { type: Object, bind: fromAttribute(JSON) }
    };
}
customElements.define("my-el", MyElement);
</script>

The conversion is also possible with custom attribute names, like the following example where the person property is set and converted through person-info attribute:

<my-el person-info="{'firstname': 'Cherif', 'age': 37}"></my-el>

<script type="module">
import { fromAttribute, StacheElement } from "can";

class MyElement extends StacheElement {
    static view = `
        <p>{{this.firstname}}</p>
        <p>{{this.age}}</p>
    `;
    static props = {
        person: { type: Object, bind: fromAttribute('person-info', JSON) }
    };
}
customElements.define("my-el", MyElement);
</script>