Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements.

1. Ehsan Lotfinia

2. Web Component Features
• Web Standard
• Framework / Technology Agnostic
• Future-proof
• Encapsulation
• Reusability

3. Web Component Technology
• Custom Elements ▷
• Shadow DOM ▷
. Isolated DOM
. Scoped CSS
• HTML Template ▷
. It is not added to DOM when the page is loaded.
. Ability enable to runtime

4. Web Components Compiler
• Polymer
• Stencil
• Slim.js
• Bit
• Skate.js
• Lit Element
• Hybrids
• Svelte
• Sigil
• Angular elements

5. Web Components UI Libraries
• Microsoft Fast
• UI5-WebComponents
• X-tag Web-Components
• Material IO
• Elix
• Wired JS
• Three Elements
• ...

6. Psudo Selector Web Component
• :host ▷
• :host-context ▷
• :slotted ▷
• :part ▷

8. Setup ▷
• Ng new angular-elements
• Ng add @angular/elements
• Npm i fs-extera concat –-save-dev
• Add to enteryComponent: [component]
• Remove bootstrap from @Ngmodule
• Add package.json > script
“build:elements”: “ng b –output-hashing none && node element-builder.js”
• Create element-builder.js in root project

9. Build
• Npm run build:elements