Skip to content

SXA Umbrella sample project showcasing how to write and consume web components created with Stencil

License

Notifications You must be signed in to change notification settings

svdoever/sxa-umbrella-webcomponents

Repository files navigation

Built With Stencil

SXA Umbrella Web Components

This is a sample project showcasing how to write and consume web components created with Stencil.

One of the components is an Address Card component:

  • Written in a version using attributes and a version using slots (for SEO)
  • Consumed in ReactJS (see )
  • Consumed in Vue
  • Showcased in Storybook

See https://mango-river-020e4d803.azurestaticapps.net/ for the above samples.

The components are published to NPM as well as the package sxa-umbrella-webcomponents.

Components can be loaded directly through https://unpkg.com by adding the following lines to the head section of your HTML page:

<link rel="stylesheet" href="https://unpkg.com/sxa-umbrella-webcomponents@0.0.3/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" />
<script type="module" src="https://unpkg.com/sxa-umbrella-webcomponents@0.0.3/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="https://unpkg.com/sxa-umbrella-webcomponents@0.0.3/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>

Replace @0.0.3 with the latest version.

How to use

See package.json for the different script commands available:

command description
start do a build of the Stencil web components in watch mode, runs at default port http://localhost:3333
start:legacy as above, but with support for Internet Support 11
build build the Stencil web components
test execute the Stencil web component tests
test.watch execute the Stencil web component tests in watch mode
generate scaffold a new Stencil web component
storybook start build of the Stencil web components in watch mode, and Storybook in watch mode
build:all build Stencil web components, React and Vue examples and Storybook, used from build server

Blog posts

Web components the silver bullet for Sitecore SXA?

About

SXA Umbrella sample project showcasing how to write and consume web components created with Stencil

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published