Are we supposed to be able to use custom element from the get go in any Typescript project ?

[sshmaxime]

Hey guys, I followed everything the docs mentions about how to correctly publish a Lit components package but I cannot just use my custom element in my React app. My components name is connect-kit but my IDE always complains with Property 'connect-kit' does not exist on type 'JSX.IntrinsicElements'.. Although, it works. I can even do const myElement = document.createElement('connect-kit'); and it will be typed. But vscode stills complain about having <connect-kit />. Any ideas ?

I correctly exported the d.ts in my package.json as well.

[drk-mtr]

lit/lit-element#1172

[augustjk]

Using @lit/react wrapper would create a React component usable in JSX that somewhat type checks.
To use bare custom elements in JSX you have to do something like this:

lit/examples/nextjs/src/simple-greeter.ts

Lines 55 to 70 in dd74c60

	declare global {
	interface HTMLElementTagNameMap {
	'simple-greeter': SimpleGreeter;
	}
	namespace JSX {
	interface IntrinsicElements {
	'simple-greeter':
	| React.DetailedHTMLProps<
	React.HTMLAttributes<SimpleGreeter>,
	SimpleGreeter
	>
	| Partial<SimpleGreeter>;
	}
	}
	}

Partial<SimpleGreeter> could be better where you can specify just the public property types there and even make stuff non-optional.

[sshmaxime]

@augustjk Thanks for your detailed answer, it now works. That being said, my properties aren't optional but Typescript doesn't seems the pick up an issue even when those mandatory properties aren't set. Any idea why ?

[augustjk]

If you're manually adding to IntrinsicElements to use bare custom elements, change the Partial<SimpleGreeter> part to be the actual props you take. Currently the Partial will make everything optional. We've been recommending Partial<ElementClass> because usually you would only define the properties on the class, but there's not a simple way to extract the public properties only from that so the Partial is required to make optional other properties on the class. You could manually enumerate out the props you care about and also make those required. From the other discussion post #4592 looks like you might have a separate type/interface for the props then it would be good to use that here.

If you're using @lit/react, there's an open issue for doing this in an easier way #4219
A workaround for now would be to create a wrapping component with more explicit props, or to cast the created component with a different type as shown in the example here #4219 (comment)

[sshmaxime]

Hey @augustjk , is there a way to make it compatible with any framework from the get go ? Because, if I add React as a peerDependency in my Lit Component, which is what I'm doing now at the end of the file:

declare global {
	interface HTMLElementTagNameMap {
		"auth-kit": AuthKit;
	}

	namespace JSX {
		interface IntrinsicElements {
			"auth-kit": React.DetailedHTMLProps<
				React.HTMLAttributes<AuthKit>,
				AuthKitProps
			> &
				AuthKitProps;
		}
	}
}

Then, this Lit Component is bound to React. Which is not what we want, right ? Is there any other way to do that universally speaking ? Ideally, I just want people to import my Lit Component and be done with it, without the need to do anything extra ?

[augustjk]

It's not specifically bound to React, but really any framework that uses the JSX.IntrinsicElements interface. In practice that may very well be just React and Preact. I'm not entirely sure how other frameworks do types for their components. I think Vue has some other interface called GlobalComponents described here https://vuejs.org/guide/extras/web-components.html#web-components-and-typescript

Unfortunately I don't know of a single way that satisfies all frameworks. Ideally it would be great if frameworks could use HTMLElementTagNameMap so component authors just have one place to add.