Creating components extending from Shoelace

[lucasmaidanaglobant]

Hi! My team is building a components library wrapping some of the Shoelace components. We want to keep the same API for our wrappers so anyone can migrate seamlessly from Shoelace to our library.

We are trying to find the best way to pass all properties from the wrapper to the Shoelace component. And sometimes we need to override or add new properties. We want to avoid defining every property all over again and have less verbose code.

We thought about extending from Shoelace classes, or creating mixins or even spreading props in a React style.

Have you come up with other ways of extending from Shoelace components? Any idea helps

[claviska]

Hi there! Shoelace components weren't designed to be wrapped/renamed/extended. You may have success with some components, but anything that uses or references other Shoelace elements will break.

Some examples:

• Many components expect specific children to exist in the DOM, e.g. <sl-menu> + <sl-menu-item>, <sl-select> + <sl-option>, <sl-breadcrumb> + <sl-breadcrumb-item>, etc.
• Some components use styles for specific tags like ::slotted(sl-icon) which won't work if tags are changed/wrapped.
• Some components import/register other components, such as <sl-button loading> which uses <sl-spinner> under the hood.

That said, extending/wrapping/changing tags wasn't a design goal of the project, and I don't see that changing in the near future. It would be better for you to fork the library or, even better, use it as-is.

[lucasmaidanaglobant]

Very clear. Thanks Cory!

[carlos-verdes]

What about these two options:

• don't extend/rename current components but create new components composing current ones
• extend some CSS to add more variables, for example the colors of the buttons (there is a conversation going on and you mentioned a new version of Shoelace will provide more flexibility here)
• create new variants for current components, for example following our design system we may need buttons with variant secondary and tertiary

[claviska]

don't extend/rename current components but create new components composing current ones

Nothing technically stops you from doing it, but this won't work with the autoloader (unless you modify the existing component's source, which is basically forking it) and we don't support that use case.

extend some CSS to add more variables, for example the colors of the buttons (there is a conversation going on and you mentioned a new version of Shoelace will provide more flexibility here)

You can do this in your own CSS already. But yes, we've reworked the CSS theming API for Shoelace 3 (Web Awesome) and that will likely save you some work when it's available next year.

create new variants for current components, for example following our design system we may need buttons with variant secondary and tertiary

The recommended way to do this is with classes.

<sl-button class="tertiary">Click me</sl-button>

<style>
  sl-button.tertiary {
    /* Custom variant styles here */
  }
</style>

However, nothing stops you from doing it with a variant (although it won't be shown in IntelliSense if you're using that):

<sl-button variant="tertiary">Click me</sl-button>

<style>
  sl-button[variant="tertiary"] {
    /* Custom variant styles here */
  }
</style>

Also note that you can create your own custom elements that work in tandem with Shoelace. You can even embed Shoelace elements into your custom elements without modifying/forking the library. That's what I typically suggest for users :)