Angular Elements used as custom elements in Angular and Preact App Demo

Web Components consist of 4 main features which can be used separately or all together:

• Custom Elements – APIs to define new HTML elements.
• Shadow DOM – Encapsulated DOM and styling, with composition
• HTML Imports – Declarative methods of importing HTML documents into other documents
• HTML Templates – The <template> element, which allows documents to contain inert chunks of DOM.

https://en.wikipedia.org/wiki/Web_Components

Getting Started

Requirements

• Nodejs version 7+
• Git Bash

Clone Repository

https://github.com/aelbore/profile-card.git
cd profile-card

git submodule init
git submodule update --remote

npm install

npm run bundle
npm run vendor:bundle

Install submodules dependencies

npm install --prefix ng-profile-card-demo
npm install --prefix preact-profile-card-demo

Bundle or Build dependencies

npm run build --prefix preact-profile-card-demo
npm run bundle --prefix ng-profile-card-demo

Start the application

/// for Preact
npm start -- --type preact

/// for Angular
npm start -- --type angular