Web components
The web is shaped and has evolved with HTML. Over decades HTML has added new features to present
information, solve complex challenges on Human-Computer Interface (HCI) and collectively progressed (to
some extent) the common baseline supported by browsers to work with the web. An interesting question
surfaces as we speak of HTML and its evolution. The question is – Is HTML a programming language or a
markup language? We might have used this question earlier but we could not avoid using it again. The
question might seem simple to answer but requires profound thought and exposure to the Web to
appreciate both the question and its answer. On the surface, the question can be dismissed if you knew the
expanded words for the HTML abbreviation – Hyper Text Markup Language. The use of markup gives it
away as HTML is not a programming language. If you ponder a bit deeper HTML instructs the browser to
render a page. It is thus a language used to interact with the browser which is an application. Programming
language is a language that you use to interact with a computer. To an extent, we can equate the computer
to the browser. Thus, HTML is practically a programming language. Expanding upon this, modern browsers
enable and help developers build modern web-based applications. Web component is one such technology
which has lingered for some time and is now at the cusp of wide-scale application to regular run-of-the-mill
application development in enterprise and the wider world outside.
All that you require
Web component packages everything you need to develop a web application. HTML, Javascript and CSS.
This packaging was missed for a long time by many developers. Web frameworks like Angular, React and
many others surfaced to address the gap. Web component is a standard accepted by W3C and its new
avatar WHATWG. One of the key-ingredient required to make this work is Shadow DOM. From a standards
perspective the API for the shadow DOM. Powered with this new API one could have side-effect-free and
less complex ways to modify DOM (HTML’s in-memory representation).
Under the bonnet, if you fancy
One of the fanciest ways to demonstrate a web component was to add a Video tag to HTML and expand its
DOM in the developer toolbar. However, with it becoming a part of the present HTML standard it is no more
treated as a web component. So, we will use the next closest and fancy way to demo it and enhance the
HTML page to make it a human-friendly form. After all, collecting data in form has been robotic with tabular
display for ages now. Let us take a stab at making it humane by striking up a conversation.
Reimagining forms with the Web component
Imagine a page that collects prospective customer’s data like this –
Welcome to Sample Insurance. We are glad to have you here and look forward to protecting your
interests against unforeseen risks. It will be amazing if you could share a few basic information about
yourself for us to recommend amazing products that help you focus on what you best do to grow. So, let
us start with your Name – ____. We also need to know your age __ so that we could decide if you can
offer the right sized premium and coverage for the risks. Let us know your city ______ and the state
________ to help us adjust the taxes and also to help you with access to our agents in case you need to
enquire about something before you finalize your right insurance plan.
That is a lot of text! In the age of natural language chat with the computer should that be a concern? The
best part of this form is it is blended in as a low-cost chat interface solution with a fancy ___ to capture the
input and reasoning around it to comfort the user in sharing the detail with the seller. How will that look in
HTML?
<!DOCTYPE html>
<html>
<head>
<title> Modern web form </title>
</head>
<body>
<p> Welcome to Sample Insurance. We are glad…
your name <input type type=”text” name=”prospectName” placeholder=”Mr. Ram Kumar” />…
</p>
</body>
</html>
You get the drift, though for keeping it focused we demoed only one input tag, you can repeat this process
for other pieces of input sought from the customer. You could make it look fancy so that the input field does
not look like a text box and blends with text at the same time distinguishes enough to indicate user needs to
supply data in that place.
The same could be done in a different manner with the Web component. Having a component comes in
handy if you want the narrative to repeat many times across products. Please do not jump in stating we
could make it manifold easier with Server-side coding or nodejs programming. You could but instead of
getting into complex topics of architecture and the Total Cost of Ownership of this hypothetical situation let
us focus on getting a grip on the technology itself. The HTML above will transform to the following with the
Web component.
<!DOCTYPE html>
<html>
<head>
<title> Modern web form </title>
</head>
<body>
<template id=”customer-acquisition”>
<p> Welcome to Sample Insurance. We are glad … <slot name=”prospect-name”> </slot> ..
</p>
</template>
<term-life>
<span slot=”prospect-name”><editable> Mr. Ram Kumar</editable></span>
<span slot=”prospect-age”>…
…
</term-life>
</body>
<script src=”/editable.js”></script>
</html>
We both know that HTML does not have an element named term-life. It is the domain (of Insurance) that
has a meaning to it and our document is now semantically rich too. But let us stay focused on the Web
component, there are a few concepts that we feel should be expanded upon before we open the javascript.
The first is of the template and another is that of slot.
Template
Is the non-rendered piece of code that captures the markup and in large-scale projects this could be
housed in HTML of its own.
Slot
Is the HTML variable (remember the programming language annotation above) that maps the data to the
place inside a template where it is rendered using the HTML element specified while using the slot. Notice
how it is used inside the term-life component.
If you copy just this HTML and render it. Nothing interesting will happen. In fact, an error will pop up for the
javascript file is not found. That is relatively easy to fix, let us introduce the file with some scaffolding. We
will visit in our next dispatch with the muscle and narrative on the javascript file.
customElements.define(‘term-life’,
class extends HTMLElement {
…
});
customElements.define(‘editable’,
class extends HTMLElement {
…
});
In our next dispatch, we will expand upon the epsilons used within the HTMLElement
