Shoelace: Best way to integrate shoelace into an existing stencil js application

[kevinlandsberg]

Hi @claviska ,

i have a more general question about using shoelace inside another stencil js project. I have started to build an application based on stencil js app starter. I would like to use a component library to focus more on the buisness logic. How would you recommend using shoelace with a local installation as np package inside my repo? ATM i am using the defineCustomElements from @shoelace-style/shoelace/dist/custom-elements' inside the index.ts inside the src folder.. Do you have a better idea? How would you integrate an external component library into a stencil js app starter project?

Thank you for your advice.

[claviska]

Since you're using Stencil, you can import it like this and start using it in your app.

import '@shoelace-style/shoelace';

You will need to include the stylesheet, though, and possibly run this to get the resize observer types.

npm install -D @types/resize-observer-browser

Then, in your JSX, use it like regular HTML.

<sl-button type="primary">Click me</sl-button>

[kevinlandsberg]

Since you're using Stencil, you can import it like this and start using it in your app.

import '@shoelace-style/shoelace';

You will need to include the stylesheet, though, and possibly run this to get the resize observer types.

npm install -D @types/resize-observer-browser

Then, in your JSX, use it like regular HTML.

<sl-button type="primary">Click me</sl-button>

Thank you very much, this is the answer i expected :)

[claviska]

I made @types/resize-observer-browser a regular dependency so you'll be able to skip that step in beta 25+.

[kevinlandsberg]

Thank you very much, was wondering why i have to install it seperately...