@cdt5058/web-comp-poc v0.0.10

Stencil Web Component PoC

This is a proof of concept for building a standalone Web Components using Stencil.

Web Components included are:

• <sds-action-row>
• <sds-button>
• <sds-colors>
• <sds-dropdown-list>
• <sds-heading>
• <sds-profile-card>

Note - Read more about the attributes each Web Component is expecting in their respective README.md files.

What is Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To get this up and running, run the following:

git clone https://github.com/ctrimm/web-component-poc
cd web-component-poc
npm install
npm run start

Note - When you run this application or add a new component, be sure to update the index.html file so you can see it appear.

To build the components for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.