Skip to content

Cannot use static functions from this.constructor in TS examples #293

@Lodin

Description

@Lodin

I'm working on the #288 PR and faced with the strange behavior of the example component. I use class static methods as callbacks and call them using the constructor property that I expect to exist for each custom element.

@customElement('badge-icons-only-table')
export class Example extends LitElement {
  private static _renderBoolean(
    root: HTMLElement,
    column?: GridColumnElement,
    model?: GridItemModel
  ): void {
    // ...implementation
  }

  public ['constructor']: typeof Example;

  private _items: readonly UserPermissions[] = [];

  constructor() {
    super();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(this.shadowRoot);
  }

  render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-grid .items=${this._items}>
        <vaadin-grid-column
          id="view"
          header="View"
          .renderer=${this.constructor._renderBoolean}
        ></vaadin-grid-column>
      </vaadin-grid>
      <!-- end::snippet[] -->
    `;
  }
}

This code works pretty well for the real project (I tried it in the bare starter project from start.vaadin.com). However, in docs, it shows me the following error.

Uncaught (in promise) TypeError: Cannot read property '_renderBoolean' of undefined
    at HTMLElement.value (39-e8ed63b86039f4f9f352.js:formatted:437)
    at HTMLElement.update (commons-86c97ed707d7fb756de0.js:4188)
    at HTMLElement.performUpdate (commons-86c97ed707d7fb756de0.js:4188)
    at HTMLElement._enqueueUpdate (commons-86c97ed707d7fb756de0.js:4188)

For some reason, the constructor for the component instance is undefined.
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    DS PublisherRelated to Design System Publisher functionality rather than to the content substance

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions