Meta Refresh 2013

The design and engineering of user interface on the web

Varunkumar Nagarajan

Varunkumar Nagarajan


Web components and the future of web development

Submitted Jan 19, 2013

The objective of this session is to learn how to build re-usable web components using the techniques which are currently supported by various browsers, knowing their limitations and understanding what we can expect in the future.


There is a fundamental problem with HTML and JavaScript that makes it hard to build reusable components / widgets - The DOM contents of the component is not encapsulated from the rest of the page. This could possibly lead to collision of IDs; unexpected JavaScript behaviour because of some existing code; broken styles; and so on. Today we overcome most of these problems by following certain conventions and assumptions. “Web Components” is a set of cutting-edge standards to solve these problems.

I will be covering some of the key aspects of building re-usable components:

  • Templates
  • Style Encapsulation
  • Separation of contents from the presentation
  • Different players of Web components - Templates, Shadow DOM, Observers, etc.

Speaker bio

My name is Varunkumar Nagarajan. A software engineer by profession and a blogger by passion. A web developer. Technology enthusiast. Have four years of industry experience.

Slides from my prev sessions can be found here:



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more