Breaking Development: Web Components

by Luke Wroblewski July 23, 2013

In his presentation at Breaking Development in San Diego CA Eric Bidelman walked through Web components and how they can be used to build Web applications in the future. Here's my notes from his talk on Web Components: a new way of building web apps.

  • Web components allow you to use custom HTML elements in the browser. You can wrap up a simple element or an entire application within an HTML element.
  • Existing HTML elements can be extended using components as well.
  • Web components allows you to build Web applications in a modular, reusable, and encapuslated way.
  • There are four parts to Web components: custom elements, HTML templates, Shadow DOM, and HTML imports.
  • Each of these elements can be used independently but when used together they are really powerful. They give you the complete picture of Web components.
  • Custom elements: you can declare a new element that registers a new tag with the browser. Inside this element you can but HTML, CSS, or Javascript.
  • There are lifecycle elements that callback when something is created or removed.
  • After you define an element, you can use it like any standard DOM element. We're not changing behaviors.
  • Custom elements are landing in Chrome, FireFox, and Opera.
  • HMTL templates define inert chunks of the DOM for later use. This is a placeholder for things you want to use at a later date.
  • Templates are hidden from the document. They are a proper template with their own context. This is really powerful for scaffolding applications. Templates are not pre-fetched or used until they are stamped out.
  • Firefox, Chrome, and Opera have support for HTML templates.
  • Shadow DOM allows you to encapsulate styles and markup. This is what native browser makers use to make their own widgets.
  • The iframe is really bloated for its purposes of embedded content on a page.
  • Shadow DOM can "host" a hidden DOM that can't be accessed from outside javascript.
  • Styles defined in Shadow DOM are scoped by default. They don't bleed across the shadow boundary unless we let them.
  • Chrome and Opera have support for Shadow DOM.
  • HTML imports: uou don't have to reinvent the wheel when you build for the Web, you can use what others have built.
  • To reuse components others have made, you can import the components using HTML imports.
  • Polymer is a 35KB javascript library that polyfills modern browsers with elements like Shadow DOM, custom elements, etc. This allows you to start using Web components today.
  • Polymer allows includes simplified data binding and event registration in addition to other enhancements.