How can we define typings for custom elements?

We can use the NgElement and WithProperties types exported from @angular/elements. Let's see how it can be applied by comparing with Angular component, the simple container with input property would be as below,

@Component(...)

class OurContainer {

  @Input() message: string;

}

After applying types typescript validates input value and their types,

Const container = document.createElement(our-container') as NgElement & WithProperties<{message: string}>;

container.message = 'Welcome to the elements!';

container.message = true; // <-- ERROR: Typescript knows this should be a string.

container.greet='News';

// <- ERROR: TypeScript knows there is no `greet` property on `container`.