prototyping web standards with custom elements (2015)

LJWatson.co.uk @LeonieWatson 1

Prototyping web standards with custom elements

OWC7 (the last hurrah)


HOW IS CONTENT PRESENTED?


• Displaying nutritional information about food products

• Displaying alternative data representations of web analytics

Tabs use cases


Accordion use cases

• Displaying bulletin board messages on an intranet

• Displaying an FAQ for game forum newbies


Carousel use cases

• Displaying brochure images on a spa resort website

• Displaying features of a prototype flying car on a corporate website


Coverflow use cases

• Flipping through sky-diving photos on a photo sharing website

• Browsing a portfolio of watercolours on an artist's website


Decks use cases

• Displaying a slide deck from a conference talk• Storing contact information in a rolodex

application


Common features

• Display one chunk of content at a time• Ability to move between chunks of content


Common interactions

• Ability to move back/forth between chunks of content


Different implementations

• Every custom implementation is different• Bad usability, missing accessibility• Reinventing the wheel


GOING NATIVE


HTML elements and attributes

• A set of consistent HTML elements and attributes

• Adaptable to different visual metaphors


REQUIREMENTS


Consistent

• Interaction must be consistent, using mouse, keyboard, touch and speech


Identifiable

• User agents must be able to identify panels and collections of panels


Stylable

• Must be possible to style panels and panelsets to match different visual metaphors


HTML ELEMENTS


The panel element

<panel>…</panel>


The paneltitle element

<panel><paneltitle>MoTD</paneltitle>…</panel>


The panelset element

<panelset><panel><paneltitle>Panel1</paneltitle>…</panel>

<panel><paneltitle>Panel2</paneltitle>…</panel></panelset>


HTML ATTRIBUTES


The removable attribute

<panel removable>…</panel>


The expandable attribute

<panel expandable>…</panel>


The preferreddisplay attribute

<panelset preferreddisplay="tabset">…</panelset>


PROTOTYPES & WEB COMPONENTS


Templates

• Chunks of inert markup• Only parsed when injected into the document


Custom Elements

• Creation of new DOM elements• Encapsulated state, with script interfaces


Shadow DOM

• Separate from the light DOM• May be associated with an element, but don't

appear as child nodes


Imports

• Custom elements are loaded using <link rel="import">

LJWatson.co.uk @LeonieWatson

Web Reflections polyfill

• Lightweight, cross-browser polyfill

30


Including the polyfill<script src="build/document-register-element.js"></script>


Custom element lifecycle

• Register custom element definition• Create custom element instance• Insert custom element into document


Registering elements

document.registerElement( "common-panel-title", { prototype: Object.create( HTMLElement.prototype, { createdCallback: { value: function () { / not much to do here... / } } }) });


Custom element semantics

• No default semantics• No interaction support

Dom tree

Accessibility tree


ARIA

• ARIA 1.0 – W3C Recommendation• ARIA 1.1 – W3C Working draft


Single panel

<panel role="group"> <paneltitle tabindex="0">MoTD</paneltitle> <div class="panel-content" tabindex="0"> Today's message… </div></panel>

Single removable panel

<panel role="group" removable> <paneltitle tabindex="0">MoTD</paneltitle> <button title="Remove panel">X</button> <div class="panel-content" tabindex="0"> Today's message… </div></panel>


Single expandable panel

<panel role="group" expandable> <paneltitle tabindex="0">MoTD</paneltitle> <div class="panel-content" tabindex="0"> Today's message… </div></panel>


Simple panelset

<panelset role="tablist"> <panel> <paneltitle tabindex="0" role="tab" aria-controls="p1" aria-selected="true">Blanco</paneltitle>

<div role="tabpanel" tabindex="0" id="p1" aria-expanded="true"> Blanco tequila... </div> </panel> ...</panelset>


Keyboard interaction

• Right/up arrows move to next paneltitle• Left/down arrows move to previous paneltitle


WHAT NEXT?


Web Platform Working Group

• Proposed W3C working group• Includes HTML, DOM, Web Components


Web Platform Incubator Community Group

• Open community for incubating new ideas for future standards


Take a deep breath

• Post the panels and panelsets extension for review


Will you help?

• Take a look, use the prototypes, file issues


THANK YOU

prototyping web standards with custom elements (2015)

Technology

custom elements owc7

imports custom elements

custom element lifecycle

custom element definiti

accordion use cases

carousel use cases

coverflow use cases

custom implementation