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.
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 |