Skip to content

svdoever/sxa-umbrella-webcomponents

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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