Proof of concept of using web Custom Elements as a basis for a common component library that can be consumed by web apps across different frameworks.
LitElement is used as tooling to develop, build and publish the custom elements.
The elements
package must be built before it can be used in the consuming apps (named app-*
).
cd elements
npm install
npm run build
This will create library of components that can be published and consumed by other apps.
npm install
npm start
npm install windows-build-tools -g
(required fornode-sass
)npm install
npm start
npm install
npm start
Since custom elements are part of the browser standard, they are framework agnostic, and can be interacted with in the same was as standard Web Components like div
and p
. However, since there is no build step, we need to bundle the elements modules into a single distributable script.
- In
elements
, runnpm run bundle
- In
app-js
- Run
start.sh
inapp-js
- Open
http://localhost:5000
- Run