Web Components: An Introduction

HTML today

1. Counting all headings as one type
2. 23 types of <input>

HTML today

HTML today

HTML today

It's <div>s all the way down!

HTML evolves

HTML evolves... slowly

Semantics

<a
 
href="..."
 
class="selected sunken-menu-item">


    <span
 
class="octicon octicon-code"></span>


    <span
 
class="full-word">Code</span>



        
</a>

<gh-tab selected="true" icon="code">Code</gh-tab>

Introducing Web Components

<link rel="import" href="gmail-widgets.html">

          ...

        <gmail-app>

            <gmail-folderlist>...</gmail-folderlist>

            <gmail-toolbar>

                <gmail-buttongroup>

                    <button is="gmail-button" icon="return" action="back"
        tip="Back to search results"></button>

                <gmail-buttongroup>
      

Web Components components

• <template>
• Custom Elements
• HTML imports
• Shadow DOM

<template>

      <template id="hello"><p>Hello, world!</p></template>
      <script>
          for(var i = 0; i < 3; i++) {
              document.appendElement(
                  $("#hello").content.cloneNode(true));
          }
      </script>
    

      <p>Hello, world!</p>
      <p>Hello, world!</p>
      <p>Hello, world!</p>
    

Custom elements

• Name ("unicorn-bike")
• Prototype (Object.prototype)
• Lifecycle callbacks

Lifecycle callbacks

      function GmailButton() {}
      GmailButton.prototype = {
        __proto__: HTMLButtonElement.prototype,
        createdCallback: function() {
          var templateContent = $('template').content;
          this.appendChild(templateContent.cloneNode(true)};
        },
        attributeChangedCallback: function(att, was, is) {},
        extends: 'button'
      }
      document.registerElement('gmail-button', GmailButton);
    

      <gmail-button></gmail-button>
    

HTML imports

• Content is not rendered, but
• JavaScript context is shared and
• document references the importing document:
  • document.registerElement() operates on the importing document

Shadow DOM

Explaining the web

• Goal: primitives which can "explain" how native elements work
• Sufficient power to create existing elements, thus sufficient power to create new elements
• Can then explain future web platform features in these terms
• This is very much a work in progress, e.g. how do we explain <label>, or the focus style behavior of <button>?
• ARIA very much has a role to play in this: this stretches ARIA far beyond its original use case

Work in progress...

• Specs are still under discussion
  • What level of encapsulation should Shadow DOM provide?
  • How do we extend native elements?
• Browser support for existing specs is... inconsistent

Support

Support

Good News

You can totally make these things accessible. This changes nothing from the accessibility perspective.

Bad News

Web Components are the new jQuery plugins

90% of science fiction jQuery plugins Web Components are shit.

-- Theodore Sturgeon

How to do it right

First: follow all your standard accessibility best practices

• Semantics and structure
• Keyboard accessibility and focus control
• Don't forget visible focus styles!
• Color contrast
• Proper labeling and alternative formats
• Where necessary, expose attributes for this

Don't reinvent the wheel

Solve Real Problems

Consider the User

No, really. Consider the User

Be Creative

WAI-ARIA

Some Cautions

• There are some wrinkles
• like some unforseen challenges
• Don't let the encapsulation trip you up

Contact Us

Alice Boxhall

Email

aboxhall@chromium.org

Work

Google Accessibility, Chromium

Twitter

@sundress

Contact Us

Karl Groves

Phone

+1 410.541.6829

Email

karl@karlgroves.com

Work

The Paciello Group

Twitter

@karlgroves

Blog

karlgroves.com

LinkedIn

http://www.linkedin.com/in/karlgroves

Resources

• Paciello Group Channel on YouTube
• Steve Faulkner on Web Components
• Introduction to Web Components
• Custom Elements Tutorial (HTML5 Rocks)
• Custom Elements Spec

Moar Resources

• Extensible web manifesto
• Shadow DOM Spec
• Template Element Spec
• Imports Spec
• Accessible Web Components
• Web components punch list
• Bosonic

So many Resources

• X-Tags
• Polymer
• CustomElements.io showcase of custom elements
• Component Kitchen
• Shadow DOM 101

Bonus Material

Bonus Material

Bonus Material

Bonus Material