Function Component

Class decorator factory. Registers the decorated class as Component through the customElements registry. Registered Components can be used in conjunction with any of the Attribute, Fluctuate and Reference prototype property decorators which will trigger their respective callbacks or Component.renderComponent whenever one of the Component.observedAttributes, Component.observedFluctuations or Component.observedReferences changes. While any Component registered by this decorator is enriched with basic rendering functionality, any implemented method will cancel out its super logic.

Example

Register a Component:

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

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

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

  public readonly styles: string[] = [`
    span {
      font-style: italic;
    }
  `];

  public get template(): JSX.Element {
    return <span>Example component</span>;
  }

}
Copy

See

• Attribute
• Reference