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.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" />
<script type="module" src="https://unpkg.com/sxa-umbrella-webcomponents@0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="https://unpkg.com/sxa-umbrella-webcomponents@0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>

Replace @0.0.1 with the latest version.

How to use

See package.json for the different script commands to build the different versions.

Blog posts

Web components the silver bullet for Sitecore SXA?