In this blog, we’ll talk about the advantages of using Web Components as well as how to avoid common problems.
Web Components consist of four main standards which can be used independently or all together:
HTML Templates: necessary for writing reusable code and declaring how it should look
HTML Imports: these let you import HTML code and reuse your components in other pages
Shadow DOM: the rules on how to create a unique DOM encapsulated by HTML markup
Custom elements: needed for adding new HTML elements into the DOM
Some of the most common challenges are:
Code complexity: building web components can be complex and developers often think they will require writing a large amount of code to implement simple functionality.
Shared resource: A web component has its own scoped resources. There may be cases where some of the resources between the components are common.
Polyfill size: The polyfill are a workaround for a feature that is not currently implemented by the browsers. These polyfill files have a large memory footprint.
SEO: As the HTML markup present inside the template is inert, it creates problems in the search engine for the indexing of web pages.
LitElement also uses lit-html to define and render HTML templates. DOM updates are lightning-fast because lit- html only re-renders the dynamic parts of your UI – no diffing required.
Check out the examples below to see it in action: