Web components allow developers to create reusable custom elements that encapsulate their functionality and styles. They utilize existing web standards like custom elements, shadow DOM, and HTML templates to define new DOM elements. Using web components provides benefits like reusability, maintainability, and encapsulation. While support across frameworks is improving, web components can also be used alongside frameworks.
17. ● The specification allows us to create new types of
DOM elements, where we have two types:
○ Autonomous elements where the entire definition
created by the developer
○ Customised element when the new element
extends from a Default HTML element
!17
Custom Elements
18. ● Independent DOM tree that provides encapsulation.
● Keeps the markup in a different layer, to keep the code
clean.
● Needs extra attention with cross-functionality Light
DOM X Shadow DOM
!18
Shadow DOM
19. HTML Templates
● Permits to create reusable HTML template without
rendering them.
● Images won't load until we attach the template on the
DOM.
!19