Tom Mortimer - Legacy Portfolio

Imagine a developer has created a website for you using Bootstrap. On one of the pages, there is an accordion widget - for example an FAQ section with questions that show & hide the answers when clicked.

One day, you would like to add an accordion to another page on your site. If this site was using Bootstrap's standard accordion plugin, you would need to copy and edit the complicated accordion HTML from the existing page (fig.1). Tricky, eh?

But wait! Your developer has created the widget as a web component, so all you need to do is copy a few easy-to-understand, easily-updateable lines of code (fig.2) and fill in the blanks!

The benefits of this are: you don't need to re-hire a developer to make the change, or risk breaking your site's layout when trying to negotiate tricky code.

In a nutshell: Web Components are self-contained widgets which contain all the HTML, CSS and JavaScript they need to run. They can be imported onto any web site and are displayed through the use of custom HTML tags.

In our accordion example, the "behind the scenes" template contains all the necessary structural code for the accordion, which can be included on the page & customised by using the simple custom HTML tags generated by the template.

The custom HTML tags and "data binding" required to make a web component can either be created using hand-coded JavaScript (although native browser support is currently poor for creating components in this way), or through a cross-browser engine such as Google's Polymer.

Web Components are very powerful, portable widgets and web apps which have two main benefits:

• → Add self-contained dynamic functionality to a site without using iframes
• → Make life easier for content editors, as custom tags mean they don't have to wrangle with complex HTML and "div soup"

Many thanks to Google's Jason Mayes for giving an excellent presentation on Web Components at #HNWebComponents in London, without which this page wouldn't exist, and Chris Coyier for his equally excellent tutorial.