I am new to web components and stencil.js. This was my first attempt at making anything beyond the simplest "Hello World" component.
I was mainly interested in understanding @Props being passed to the component, specifically using an object rather than just a boolean, number, or string. I wanted to use either a JSON object or an array. There are two examples on the page. One uses Javascript to add the prop, and the other uses stringified JSON being passed as an HTML attribute.
This is not meant to duplicate the design system table in any way, it just suited my needs for what I was trying to figure out
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.
Material Design Lite CSS was used to style the table. It also adds the sort icons based on the class for a given table cell. Colors can be customized here. Only CSS was used, the javascript that is part of MDL was not included.
Clone this repo to a new directory:
git clone https://github.com/mendacitees/stencil-learning-project.git and run:
npm install
npm start