We can easy bind attributes for our custom element. By providing array of attr names in a static function observedAttributes. By defining attr name for example who

import { WebComponent } from 'web-component' @WebComponent('hello-world', { template: require('./hello-world.html') }) export class HelloWorld extends HTMLElement { static get observedAttributes() { return ['who']; } }

Docorator will handle for us:

1. What happens is that decorator adds a class property which you can access this._who for example to set a default value in a controller

import { WebComponent } from 'web-component' @WebComponent('hello-world', { template: require('./hello-world.html') }) export class HelloWorld extends HTMLElement { constructor() { super(); this._who = null; } }

2. Next thing is it watches attributeChangedCallback and whenever attribute who is changed it updates this._who property.

<hello-world who="Unicorn"></hello-world>

3. It watches connectedCallback and if our custom element has attribute who it updates this._who property

4. It adds getter and setter methods, this way we can access, and change attr value with ajvascript.

const helloWorldComponent = document.findElementById('example'); helloWorldComponent.who; //display value of this._who helloWorldComponent.who = 'Unicorn'; //sets attr and this._who property value to Unicorn