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.

This live demo contains both the "behind the scenes" template code (which your developer will have already imported on your website as an HTML file), and the HTML shown in (fig.2) which you would add. The "Result" tab shows the accordion you would see on your site.

Press "Edit on Codepen" and try adding an extra question & answer by adding <question3></question3> and <answer3></answer3> tags to the <dynamic-accordion> section, and see how easy it is!

See the Pen ihKBA by Tom Mortimer (@TJMortimer) on CodePen.

Is this component scaleable, or do I have to have a fixed number of questions & answers?

It's scaleable! In the demo above, there are two Q&As in the accordion - but the template code is equipped to deal with up to three. The redundant Q&A block is just waiting "in the wings", ready to be used. On a real site, the template would contain a much larger number of Q&A blocks so the user could add as many Q&As as they wished (within a reasonable limit.)

If this component is being loaded on every page, even on pages without accordions, will it slow the site down?

No - the web component will not be loaded every time the user visits a page. It is imported as an HTML file once on the user's first visit to the site, and sits in the browser cache ready to be used.

Do I have to use Bootstrap to use this component?

No - all web components are completely self-contained, so can be used on any site.

What's browser support like?

Currently, Polymer is required to make web components work across most browsers. Google Chrome is the only browser which currently doesn't require Polymer to use "native" web components. However! As Polymer makes it very easy to create web components, and contains extra features to create rich apps, I imagine it will continue to be used even after all browsers support native web components.

Can I use this web component on my site?

Please feel free to copy the component from Codepen and modify/host/use it!

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.