@scoped-elements/shoelace

This is the Shoelace Design System library packaged using the scoped custom elements registries pattern using @open-wc/scoped-elements.

Installation

npm i @scoped-elements/shoelace

Usage

As an sub element in your own custom element

import { SlButton, lightTheme } from '@scoped-elements/shoelace';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

export class CustomElement extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'sl-button': SlButton,
    };
  }

  render() {
    return html` <sl-button></sl-button> `;
  }

  static styles = [lightTheme]
}

As a globally defined custom element

import { SlButton } from '@scoped-elements/shoelace';

customElements.define('sl-button', SlButton);

// Use in the same way as the shoelace library in the html

This requires you to include the shoelace theming separately. See theming.

Documentation for the elements

As this package is just a re-export, you can find the documentation for the elements here.

Appreciation

This library is just a re-export, all the credit goes to Shoelace and its authors. Thanks!