wrAttributes

Web components that extend wire.ui.WebComponent can use the wrAttributes base method. wrAttributes transforms all of the attributes set on a web component into a single object. The transform uses the "-" character as an object property break. This makes it possible to use complex objects with attribute bindings.

Set up a complex object via component attributes.

<my-component 
    message="Hello web components" 
    products-fruit="bananas",
    products-cookies="chocolate chip">
</my-component>

Transform the attributes into an object and set into a public property.

class MyComponent extends wire.ui.WebComponent {
   
   attrib: any;   
   
   connectedCallback(){
       this.attrib = this.wrAttributes();    
   }
   
   static get templateUrl() {
       return './my-component.html';
    }
}
customElements.define('my-component', MyComponent);

// this.wrAttributes();  
{
    message: "Hello web components",
    products: {
        fruit: "bananas",
        cookies: "chocolate chip"
    }
}

Use the object in the component template.

<!-- my-component.html -->
<div>{attrib.title}</div>
<div>{attrib.products.fruit}</div>
<div>{attrib.products.cookies}</div>