The document outlines the features and technologies of web components, emphasizing their web standard compliance and framework agnosticism. It covers essential elements such as custom elements, shadow DOM, and HTML templates, along with various libraries and setup instructions for integrating web components into Angular applications. Additionally, it lists pseudo-selectors relevant to web components, highlighting their encapsulation and reusability capabilities.

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