How to use in solid.js

[xxxxue]

Hi , How to use in solid.js ,
Is there an example.
If it can be used in solid.js, it is really great

[claviska]

I haven’t used Solid yet, but I’ll tweet a link to this thread so maybe someone will chime in.

[justinfagnani]

https://custom-elements-everywhere.com/#solid

It looks like Solid has good custom element support.

[hawkticehurst]

I had to figure this out for a sample extension with the Webview UI Toolkit for VS Code recently, so I think I can help!

The short answer is that everything just kind of works out of the box!

In the case of Shoelace, all you should need to do is:

EDIT:

I previously suggested that one follows the Shoelace quick start directions by installing Shoelace resources from a CDN.

Based on feedback from @justinfagnani below (thanks!) it's best not to mix and match loading packages from npm (i.e. Solid) and a CDN (i.e. Shoelace). Here is a new set of directions for configuring Solid + Shoelace using only npm. (Note: These directions also assume you've started your Solid project by using one of the official Solid templates).

1. Install Shoelace via npm

npm install @shoelace-style/shoelace

2. The default Vite config of Solid's templates can handle importing CSS files/JS modules from Shoelace, so simply update the src/index.jsx or src/index.tsx to include imports for Shoelace's theme CSS file and the specific JS files for each component you would like to use (also see Shoelace's docs on bundling for more guidance on this topic)

/* @refresh reload */
import { render } from 'solid-js/web';
import '@shoelace-style/shoelace/dist/themes/light.css';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import './index.css';
import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

3. Add Shoelace components anywhere in your Solid component markup (here's an example with src/App.tsx)

import type { Component } from 'solid-js';

import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <sl-button>Learn Solid</sl-button>  <-- 🥳
      </header>
    </div>
  );
};

export default App;

4. Celebrate 🎉

An important caveat when using TypeScript and JSX:

If you're using TypeScript and JSX you'll have to create a type declaration file to extend the solid-js JSX.IntrinsicElements type interface to include type annotations for each of the Shoelace components you use.

Without this, type errors will occur when you try to use any Shoelace component in your Solid + TypeScript + JSX component code. (Note that this file shouldn't be necessary if you're not using TypeScript or are using tagged template literals instead of JSX for your Solid component code).

Basically copy-paste the following into a shoelace.d.ts file in the src directory (and remember to update this file whenever you start using a new Shoelace component in your code!):

EDIT:

Check the below discussion thread for an improved declaration code snippet that offers better type annotations for Shoelace components.

import "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "sl-button": any;
      // Add other component type annotations always in the format: "component-name": any;
    }
  }
}

Hope that helps! 😊

[claviska]

+100 bonus points if someone wants to turn this into a page on shoelace.style 🙌

e.g. https://shoelace.style/tutorials/integrating-with-nextjs

[justinfagnani]

I figured out how to get good typings for all custom elements that are added to HTMLElementTagNameMap without having to add each individually to 'solid-js'.JSX.IntrinsicElements and without using any for the type.

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

You can see in the Solid playground that an element with foo: number causes an error with a binding of prop:foo={'hello'}, which is what we want:

Solid Playground Link

[hawkticehurst]

Oh that's awesome, thank you @justinfagnani! Definitely going to look into incorporating that into my work over in VS Code land too 🙌🏼

[joliss]

@justinfagnani Quick addition: I had to add

import type { JSX } from "solid-js";

at the top, or I would get Cannot find name 'HTMLAttributes'..

[AlexErrant]

If that JSX import is unused, consider this selection from the Typescript docs:

If you have a file that doesn’t currently have any imports or exports, but you want to be treated as a module, add the line:

export {};

which will change the file to be a module exporting nothing. This syntax works regardless of your module target.