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

Question

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?

Does this also happen, when you use the decorators? `@customElement('my-component')`. Would be easier anyways and if you are using typescript already... And which ts version are you using? — Christian, Jan 12 '22 at 21:33
Hey, thanks for your input! Error message is gone =) I am using typescript version 4.5.4 — StephanB, Jan 13 '22 at 07:24

score 1 · Accepted Answer · answered Jan 13 '22 at 07:31

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.

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

1 Answers1