Welcome to Marklar

South Park scene

A Marklar walks into a Marklar. Marklar asks the marklar, "do you have any Marklar?"

The Marklar shakes his Marklar and says "No, we only have Marklar"

To navigate to the next slide, use the space-bar.

This has been an exercise in...


No, thanks

The worst HTML markup where every tag and attribute is "marklar"

      <marklar style="background-image: url(marklar.gif);">
        <marklar>Marklar was a secret Apple development program
        to put Mac OS X on the Intel x86 microprocessor. Ten years
        ago, the first rumors of Marklar emerged.</marklar>
        <marklar href="#" onclick="doMarklar()">More</marklar>

Accessibility of Web Components

Accessibility Challenges

  • Semantics
  • Keyboard access
  • Text alternatives
  • Color contrast

Web Components

New standards moving through the W3C

  • Custom Elements
  • Shadow DOM
  • Templates
  • HTML Imports
  • Decorators


  • Web Components!
  • Shadow DOM
  • Custom Elements

Why are we excited?

  • Extend the DOM
  • Less waiting for browsers
  • Minimize conflicts

Shadow DOM

Encapsulation by hiding DOM subtrees under shadow roots

Shadow DOM and the Browser's Rendering Tree

Browser rendering tree

Source: W3C Shadow DOM Specification

Rendering Engine Basic Flow


Webkit rendering engine main flow

Source: How Browsers Work, HTML5 Rocks

Trees “as rendered”

Bob Ross happy little tree

How do I Shadow DOM?

  var template = document.querySelector('template'),
      tacoSurprise = Object.create(HTMLElement.prototype);

  tacoSurprise.createdCallback = function() {
    var shadowRoot = this.createShadowRoot(),
        clone = template.content.cloneNode(true);


  document.registerElement("taco-surprise", {
    prototype: tacoSurprise

Demo opens in a new window

Current Native Support

Shadow DOM

  • Chrome 25+
  • Opera 15+
  • Firefox 30+
  • Chrome for Android 33+
Browser Icons

Source: Caniuse.com


  • Polymer
  • X-Tag*

*Shadow DOM coming soon

Custom Elements


How to add semantics

Extend a native element

  var TacoButtonPrototype = Object.create(HTMLButtonElement.prototype);
  var TacoButton = document.registerElement('taco-button', {
    prototype: TacoButtonPrototype,
    extends: 'button'
  var tacoButton = new TacoButton();
  document.body.appendChild(tacoButton).textContent = 'Give me tacos';
  tacoButton = document.querySelector('button[is=taco-button]');

How to add semantics

Use native child elements

          <h2>Taco Surprise!</h2>
          <button>Give me tacos</button>

            <img src="" alt="" aria-hidden="true">
            <p class="error hidden">Or give me death</p>

How to add semantics


ARIA and Tab Index

  <taco-button role="button" tabIndex="0">tacos!</taco-button>

  <pork-slider role="slider" aria-valuemin="1" aria-valuemax="5"

The Ultimate
Web Component

Give me tacos

Custom Elements

Native Support

  • Chrome
  • Opera
  • Firefox (Nightly)

Source: are we componentized yet?
Note: this stuff moves fast!