From 8911ea222d58078f89cfe892136437cc9e294322 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sun, 19 Jul 2020 11:30:01 -0400 Subject: [PATCH] Add custom elements bundle docs --- docs/getting-started/installation.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 3c3c39e8d..70088f2cc 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -13,7 +13,7 @@ Just add the following tags to your page. ``` -Now you can [start using Shoelace components!](/getting-started/usage.md) +Now you can [start using Shoelace!](/getting-started/usage.md) ## Local Installation @@ -32,4 +32,22 @@ Once you've done that, add the following tags to your page. Make sure to update ``` -Now you can [start using Shoelace components!](/getting-started/usage.md) +## Importing Custom Elements + +A [custom elements bundle](https://stenciljs.com/docs/custom-elements) is also exposed so you can import components and register them individually. This is a flexible alternative to the lazy loading approach described above. + +To import a single Shoelace components, use this syntax. + +```js +import { Button } from '@shoelace-style/shoelace/dist/custom-elements'; + +customElements.define('sl-button', Button); +``` + +For convenience, the bundle also exports a `defineCustomElements()` method. When this method is called, it will automatically define all Shoelace components in the bundle. + +```js +import { defineCustomElements } from '@shoelace-style/shoelace/dist/custom-elements'; + +defineCustomElements(); +```