Is there a good guide or howto on how to make (non solid) custom web components work with solidstart

I am having hard time understanding how to import CSR rendered custom web components into a solid start app.

4 Replies

ai6•2y ago

AFAIK web component should just work out of the box. I am currently building an app with them and the only issue was typescript support, I had to declare them like this:

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "media-player": any;
      "media-outlet": any;
      "media-poster": any;
    }
  }
}

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "media-player": any;
      "media-outlet": any;
      "media-poster": any;
    }
  }
}

Ville Takanen (they/them)OP•2y ago

Is there a way to give them props in that manner? Or do I just need to do with 'any'? (my error seems to be I tried to declare them for the element-lib, not for 'solid-js')

ai6•2y ago

from this issue, you can try this:

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> {
    }
  }
}

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> {
    }
  }
}

In my case, I could't get it to work with children and it only shows the default html element props which is not very useful for custom elements, so I gave up pretty quickly and just set it as any. You might have more luck than me though 🤷‍♂️

GitHub

Declare web component in solid typescript · Issue #616 · solidjs/so...

have been tried implement web component in solid typescript but i dont really know how to declare the component name, it show an error like this. i have tried to declare it on file declaration.d.ts...

Ville Takanen (they/them)OP•2y ago

Thanks!

Gaming

Programming

Is there a good guide or howto on how to make (non solid) custom web components work with solidstart