> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/wrattributes.md).

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

```html
<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.

```javascript
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);
```

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

Use the object in the component template.

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