We had a recent request from one our clients to build some features into their product. The catch was these had to be made available on websites belonging to their own external customers. Obviously, we didn't have any access or control to the technologies on those websites, which are managed by third parties. Another part of the challenge was that a rich user experience was still expected for the target features.
What are the Options?
This is in fact a common use-case and it has some very common solutions as well. One popular solution is to build a self-contained widget as a web page and embedding it in a different website/applicating using an IFRAME. While this is one of the oldest methods, it is well-supported by web standards, and used by many web widget developers. Of course, this has its own challenges in certain cases, but the simplicity of the method often supplies a good enough solution for many situations.
While our easier choice was IFRAME, we investigated another option, which is a recent web standard called “Web Components”. Web Components allows the definition of a custom HTML tag, including what it looks like and how it behaves. Then it’s just a matter of including a line in the host web page with this new tag; you get your widget displayed on the page seamlessly!
What are Web Components?
Web Components is a W3C standard since 2014 (while it was first introduced as far back as 2011). It is composed of three key web technologies
- Custom HTML Elements
- Shadow DOM
- HTML Templates.
Beyond UI Controls
In our use-case, we stretched the capabilities of Web Components to build an entire application feature as a widget (or a Mini App). This included the user experience of that feature, client-side logic and communication with backend APIs, all packed into an embeddable component. Web components can be minified, bundled, and hosted as static content. Following this process, they were then used in multiple third-party web sites/applications with just two lines of code.
So, what were the benefits using this approach to build an embeddable widget? First, we were able to include the feature in the component to the parent page more seamlessly without the usual challenges in IFRAME approach such as dealing with the component height. Also, we can use some of the parent page styling inherited by the web component, so that widget looks more native to the theme of the parent page. Since the component is just another custom HTML tag, we were able to provide a standard and familiar programming interface to those who want to customize the widget. This is done by using HTML element attributes and events. Web components can be universally used on many types of client-side web technologies including pure HTML, Angular, React, Vue etc. We wanted to use the same features within our customers core product, and it was just a matter of including the components in the client-side SPA. From a performance point of view, features developed as Web Components were lightweight and fast too!
How to build Web Components?
Overall, Web Components is a great approach to build standard-based reusable components for the web that can be used with many other web technologies. While its standard use is to build small UI Components, it is also possible to build small application features using Web Components effectively.
Discuss & share web components -