• Version 1.1.2
  • Published
  • 222 kB
  • 14 dependencies
  • MIT license


npm i @glimmer/component
yarn add @glimmer/component
pnpm add @glimmer/component


Glimmer component library



class Component

class Component<S = unknown> extends BaseComponent<S> {}

    property args

    args: Readonly<Args<S>>;

      property bounds

      bounds: Bounds;
      • Contains the first and last DOM nodes of a component's rendered template. These nodes can be used to traverse all of the DOM nodes that belong to a particular component.

        Note that a component's first and last nodes *can* change over time, if the beginning or ending of the template is dynamic. You should always access bounds directly at the time a node is needed to ensure you are acting on up-to-date nodes.

        ### Examples

        For components with a single root element, this.bounds.firstNode and this.bounds.lastNode are the same.

        <div class="user-profile">
        <Avatar @user={{user}} />

        export default class extends Component {
        didInsertElement() {
        let { firstNode, lastNode } = this.bounds;
        console.log(firstNode === lastNode); // true
        console.log(firstNode.className); // "user-profile"

        For components with multiple root nodes, this.bounds.firstNode refers to the first node in the template and this.bounds.lastNode refers to the last:

        Welcome to Glimmer.js!
        <span>Let's build some components!</span>
        <img src="logo.png">

        export default class extends Component {
        didInsertElement() {
        let { firstNode, lastNode } = this.bounds;
        // Walk all of the DOM siblings from the
        // firstNode to the lastNode and push their
        // nodeName into an array.
        let node = firstNode;
        let names = [firstNode.nodeName];
        do {
        node = node.nextSibling;
        } while (node !== lastNode);
        // ["#text", "SPAN", "IMG"]

        The bounds can change if the template has dynamic content at the beginning or the end:

        {{#if user.isAdmin}}
        <span class="warning">Admin</span>
        Normal User

        In this example, the firstNode will change between a span element and a TextNode as the user.isAdmin property changes.

      property debugName

      readonly debugName: string;
      • Development-mode only name of the component, useful for debugging.

      property element

      readonly element: HTMLElement;
      • The element corresponding to the main element of the component's template. The main element is the element in the template that has ...attributes set on it:

        <div class="contents" ...attributes>

        In this example, this.element would be the div with the class contents.

        You should not try to access this property until after the component's didInsertElement() lifecycle hook is called.

      method didInsertElement

      didInsertElement: () => void;
      • Called when the component has been inserted into the DOM. Override this function to do any set up that requires an element in the document body.

      method didUpdate

      didUpdate: () => void;
      • Called when the component has updated and rerendered itself. Called only during a rerender, not during an initial render.


      namespace @ember/component

      module '@ember/component' {}

        function capabilities

        capabilities: {
        version: string,
        opts?: { destructor?: boolean; asyncLifecycleCallbacks?: boolean }
        ): any;
        version: '3.13' | '3.4',
        capabilities: Partial<CustomComponentCapabilities>
        ): CustomComponentCapabilities;

          function setComponentManager

          setComponentManager: {
          <T>(managerId: string, baseClass: T): T;
          <T>(managerFactory: (owner: any) => {}, baseClass: T): T;
          <T extends object>(
          factory: (owner: ApplicationInstance) => EmberGlimmerComponentManager,
          componentClass: T
          ): T;
          <T extends object>(name: string, componentClass: T): T;

            namespace ember

            module 'ember' {}

              function destroy

              destroy: (obj: object) => any;

                function meta

                meta: (obj: object) => Meta;

                  Package Files (4)

                  Dependencies (14)

                  Dev Dependencies (41)

                  Peer Dependencies (0)

                  No peer dependencies.


                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@glimmer/component.

                  • Markdown
                  • HTML
                    <a href="https://www.jsdocs.io/package/@glimmer/component"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>