CODEWITHSUNDEEP
reactjssolid-js
Aero Wang
Aero Wang

Reputation: 9247

How to use a web component in a solid.js project?

Property 'aero-modal' does not exist on type 'JSX.IntrinsicElements'.

When I try to use a web component in my Solid.js project (instead of building one), it doesn't recognize the tag as it is not an intrinsic element. How can I setup solid.js to recognize web components?

Upvotes: 14

Views: 3060

Answers (2)

thetarnav
thetarnav

Reputation: 898

This is how you can extend the global types, to get rid of TS error:

import type { ComponentProps } from "solid-js"

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "aero-modal": ComponentProps<"div"> & { foo: number }
    }
  }
}

I don't know how to get the custom elements themselves to work though... But I would assume they already do. They are custom elements after all, and solid doesn't judge. If the tag in JSX is in lowercase, it should treat it as an html element.

Note: The ComponentProps<"div"> & { foo: number } I've put there, are the props. You could put an {} there if the component doesn't have any.

Upvotes: 11

DharmaTurtle
DharmaTurtle

Reputation: 8467

If you're extending HTMLElement, a more general solution may be

declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}

From an issue on the Solid github.

Upvotes: 3

Related Questions