Web components allow developers to create reusable custom elements with encapsulated functionality that can be used across projects and frameworks. It is a suite of technologies including custom elements, shadow DOM, and HTML templates rather than a single technology. Web components do not require a third party library or framework and can be used with existing frameworks like React, Vue, and Angular. They allow encapsulating business logic and UI for reusability across projects, and utilize the same component in different frameworks.

1. Welcome

2. What is Web component
It is not a single technology rather is a suite of different technologies allowing us to create
reusable custom elements — with their functionality encapsulated away from the rest of our
code — and utilize them in your web apps.
It does not need 3rd party library or framework, it is pure web technology that can be used with
other existing framework like React, Vue, Angular even without any framework

3. Why Web component
- Encapsulate business logic and UI
- Highly reusable across project even among multiple projects with different web
frameworks
- Pure web technology, so we can use with any project without any framework
- Same component can be used in vue, react, Angular and other framework also

4. Web Component
Custom HTML
Element:
Register our own
HTML tag
Shadow DOM:
Manage a separate
DOM node tree
HTML templates:
The <template>
and <slot>
elements enable
you to write
markup templates
HTML Import
Discontinued due to
modern dev tool
provide good
solution

5. Types of Custom Element
1. Autonomous Element which does not depend on any other element
2. Extended Built-in elements

8. Web Component Lifecycle

9. Custom Element Vue.js React Class based component
constructor Created for component, bind for
custom directive
constructor
connectedCallback mounted componentDidMount
attribureChangedCallback updated componentDidUpdate
disconnectedCallback unmounted componentWillUnmount (similar
but not exact)
Custom element’s Callback methods compared to Vue.js &
React

10. Time for real coding

11. ● DataFormsJS — Open source web components library — Set of Web Components that can be used to build Single Page
Apps (SPA), Display JSON data from API’s and Web Services, and bind data to different elements on screen. All Web
Components are plain JavaScript and require no build process.
● FAST is a web component library built by Microsoft which offers several packages to leverage depending on your project
needs. Fast Element is a lightweight means to easily build performant, memory-efficient, standards-compliant Web
Components. Fast Foundation is a library of Web Component classes, templates, and other utilities built on fast-element
intended to be composed into registered Web Components.
● Hybrids — Open source web components library, which favors plain objects and pure functions over class and this syntax.
It provides a simple and functional API for creating custom elements.
● Lit — Google's web components library, the core of which is a component base class designed to reduce boilerplate while
providing reactive state, scoped styles, and a declarative template system.
● Snuggsi — Easy Web Components in ~1kB Including polyfill — All you need is a browser and basic understanding of HTML,
CSS, and JavaScript classes to be productive.
● Slim.js — Open source web components library — a high-performant library for rapid and easy component authoring;
extensible and pluggable and cross-framework compatible.
● Stencil — Toolchain for building reusable, scalable design systems in web components.

12. References & Further reading
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developers.google.com/web/fundamentals/web-components/customelements
- https://html.spec.whatwg.org/multipage/custom-elements.html
- https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
- https://github.com/WICG/webcomponents
- https://www.webcomponents.org/
- https://github.com/engr-hasanuzzaman/funwith-web-
component/tree/master/custom_components

13. Questions session

14. Thanks for you Time