What are Web Components
"Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps." - MDN Web Docs
Web components are used by many major organisations around the globe and are in use in most JavaScript frameworks. Microsoft and Google have produced their own libraries to assist in creating web components.
I have the most experience with and recommend LitElement, I have created many applications for businesses with it over many years. LitElement is light and fast, incredibly fast, only updating the DOM that changes, meaning it updates in a fraction of the time of virtual DOM libraries. Plus LitElement package size is currently 23.2kB and the next iteration is 18.3 kB.
To make setting up a LitElement even easier you might want to leverage the open-wc package as unlike LitElement it is opinionated and has a lot of sane choices made for the development of web components.
Further References:
https://www.webcomponents.org/introduction
https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://bundlephobia.com/result?p=lit-element@2.4.0
How do they work
The HTML the browser reads is full of elements, like <input> and <img> and the browser inherently knows how to handle those, albeit slightly differently at times. This is what makes the web a successful means of document transport and more recently in its lifetime a transport mechanism for applications. Based on the demand for truly reusable pieces of code with rapid inclusion into the project the standards boards and the browser manufacturers agreed on the set of standards that make up web components.
Essentially every element that doesn’t already exist in html is now able to be created as a custom element. Or to better utilise modern features of JavaScript existing elements are augmented. For example the white labelled Lion Elements by ING or Shoelace. These would make an excellent start to the web / web application section of a fully developed design system.
How to apply the components
The best use case for web components is in a design system. A fully detailed design system implements automated changes from design all the way down each component in all libraries used by the design system. This means changes can be tested and made across all the business products at once, removing the barrier to make design changes, and limiting the developer requirement for these changes. This improves designer and developer productivity. Setting up a design system like this, however much of the details of a design system will be skipped except those relevant to web components.
Web Applications are more and more frequently being used not only as entire web experiences but to provide an app like experience for a section of a website. It is for this reason knowing how to have the experience seamless is paramount.
When the design system triggers a change, for example a primary colour change to the elements the modern stack for web components distributes the change across all of the element and it is automatically deployed. Meaning all the components are built and re-distributed via automated triggers. This would also apply to anything under the design system like a bug with an individual component level.
Web Components will include their own formatting code, like <video> which would mean they aren’t as impacted by the changing of a website's style sheet, unless that is so desired. This is a major advantage when working with a design system as only the intended changes are applied.
Some applications are more complex to get web components into elements a method like using a CDN should be leveraged, this way changes are updated automatically.
It is very useful to note that these same web components can work with any of the latest JavaScript frameworks, ensuring you aren’t limited to React, Angular, Vue or otherwise. Lots of frameworks have their own elements, but there are several issues with these framework specific elements. You must only use them in the framework they were designed for, which limits their lifespan to that framework and sometimes when the framework changes elements no longer work for the framework.
Another use for web components is when native mobile applications leverage web view to provide forms and other web related activities to their users. These elements can provide the consistent look and feel for the user especially when used in conjunction with native elements that belong to the fully detailed design system alluded to so far in this document.
Conclusion
Web Components can simplify a lot of the development process for your team. This is a more efficient use of the team’s expertise, ensuring that the implementation of the components is almost as easy as any other html element.
Leveraging a self-diminishing library like LitElement means updates will ensure less code is pushed to your users not more and will ensure compatibility in the future as it aligns itself with browsers unlike many frameworks and libraries that ignore browser changes. This too future proofs your design system and means that upkeep and maintenance are minimal at best. This is why more and more large corporations have adopted web components and are leveraging design systems and will continue to do so in the future.
Further references:
https://viljamis.com/2019/why-we-use-web-components/
https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2
https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/
https://trends.builtwith.com/websitelist/Web-Components
https://trends.builtwith.com/javascript/Web-Components
https://github.com/web-padawan/awesome-lit-html
Top comments (0)