Function Attribute

Component prototype property decorator factory. Applying the Attribute decorator to a property of a Component binds the decorated property to the corresponding Attribute of the respective Component. This implies that the Attribute name is appended to the Component.observedAttributes array of the Component and the decorated property is replaced with a getter and setter deferring those operations to the Attribute. If no name supplied, the name of the decorated property will be used instead. Further, if both, a parameter initializer and an initial Attribute value are supplied, the Attribute value takes precedence.

Example

Bind a property to an Attribute:

import { Attribute, Component } from '@sgrud/shell';

declare global {
  interface HTMLElementTagNameMap {
    'example-component': ExampleComponent;
  }
}

⁠@Component('example-component')
export class ExampleComponent extends HTMLElement implements Component {

  ⁠@Attribute()
  public field?: string;

  public get template(): JSX.Element {
    return <span>Attribute value: {this.field}</span>;
  }

}
Copy

See

Component