Search code examples
typescriptlit

Lit 2.0 customElements.define() throws ts(2345)

After migrating several lit-Components to v2 "lit": "2.1.1", we receive the following typescript error:

Argument of type 'typeof MyComponent' is not assignable to parameter of type 'CustomElementConstructor'. Type 'MyComponent' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 275 more.

import { html, css, LitElement } from 'lit';

export default class MyComponent extends LitElement {...}

customElements.define('my-component', MyComponent);

Code runs fine so far - is this just a bug in lit?

Solution

  • Instead of calling the define function, you can use the decorator version when using typescript.

    import { html, css, LitElement } from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-component')
export default class MyComponent extends LitElement {...}

    customElement - Class decorator factory that defines the decorated class as a custom element.