Function Reference

Component prototype property decorator factory. Applying this Reference decorator to a property of a registered Component while supplying the referenceing JSX.Key] and, optionally, an array of event names to observe, will replace the decorated property with a getter returning the referenced node, once rendered. If an array of event names is supplied, whenever one of those observed events is emitted by the referenced node, the Component.referenceChangedCallback of the Component is called with the reference key, the referenced node and the emitted event.

Example

Reference a node:

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

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

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

  ⁠@Reference('example-key')
  private readonly span?: HTMLSpanElement;

  public get template(): JSX.Element {
    return <span key="example-key"></span>;
  }

}
Copy

See

Component