Web Components

Collection of new features

  • Shadow DOM
  • HTML Imports
  • Custom Elements
  • Templating

Shadow DOM

  • HTML Imports
  • Custom Elements
  • Templating

Document Object Model

Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots in the main DOM

HTML5 Video Player

HTML Imports

  • Custom Elements
  • Templating
  • Shadow DOM
<link rel="import" href="import-file.html">

Custom Elements

  • Shadow DOM
  • HTML Imports
  • Templating

<cdd></cdd>

How?

http://customelements.io/

  • Shadow DOM
  • HTML Imports
  • Custom Elements

Templating

<template id="profileTemplate">
  <div class="profile">
    <img src="" class="profile__img">
    <div class="profile__name"></div>
    <div class="profile__social"></div>
  </div>
</template>

Not rendered/downloaded until activated

For reusable chunks of html

Why?

  • Recyclable widgets with APIs for configuration
  • Style encapsulation using Shadow DOM
  • Less frameworks
  • Native support (faster)

Examples

<qr-code data="My data stored as a QR code."></qr-code>
<time is="relative-time" datetime="2014-04-01T16:30:00-08:00">
  April 1, 2014
</time>
  • just now
  • 30 seconds ago
  • a minute ago
  • 30 minutes ago
  • an hour ago
  • 20 hours ago
  • a day ago
  • 20 days ago
  • on Apr 1, 2014
<github-card user="pazguille"></github-card>

When?

(polyfill)

Polymer FAQ:

Is Polymer production ready? We don’t think so, but if you’re the adventurous type you’re welcome to give it a try.

Web Components

By Bård Hovde

Create a presentation like this

Web Components

  • 710
Loading comments...

More from Bård Hovde