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

user_1613047 0
Viewed 394

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?

solid-js reactjs
2 Answers

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

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "aero-modal": JSX.IntrinsicElements["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 JSX.IntrinsicElements["div"] & { foo: number } I've put there, are the props. You could put an {} there if the component doesn't have any.

user_155978800

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.

user_6259190
Related