How to add Shoelace library of components to existing Stencil.js project

Question

There is a library called "shoelace" ( https://shoelace.style/getting-started/usage ) which is a collection of web components built with stencil.js. I would like to use the components from that library inside of my existing stencil.js project.

However, when I follow the instructions for a local installation using NPM, it doesn't work, even though the component appears to be loaded.

I receive the following error when I try to render shoelace's button component: Class constructor SlButton cannot be invoked without 'new'

This is my test-button.tsx component:

import { Component, h} from '@stencil/core';

import '@shoelace-style/shoelace/dist/themes/base.css';

import SlButton from '@shoelace-style/shoelace/dist/components/button/button';


@Component({
  tag: 'test-button',
  shadow: true,
})

export class TestButton {

  render() {

    return (
      <div>
        <SlButton>hdcsddsy</SlButton>
      </div>
    );
  }
}

What is wrong here?

Answer 1

Shoelace is no longer developed with Stencil. As of beta.29, it uses Lit. However, the end result is still a collection of custom elements, so you can use them anywhere.

First, install Shoelace:

npm i @shoelace-style/shoelace 

Then, in your Stencil component, import the Shoelace element(s) you want to use like this:

import '@shoelace-style/shoelace/dist/components/button/button';

The custom elements are registered via side effect. To use them in your JSX, use the corresponding HTML tag:

render() {
  return <sl-button type="primary">Click me!</sl-button>;
}

Note: if you're not seeing any styles, you'll also want to load the light or dark theme.