Peter Gasston: Web Components: where we are now and where we go next.
Peter Gasston was talking about web components at Responsive Conf, theser are my notes from his talk.
Web components have been around for a while. They're about three years old in terms of Chrome nightly builds. All the major browser vendors are now bought in - this is causing a bit of trouble.
Web components allow us to create widgets - self contained with styles and behaviour. Composable, reusable and encapsulated. React and BEM are ways of doing these things today but we need a standardised way of doing this - part of the extensible web manifesto. The picture element is the first example of this.
- Templates
- HTML imports
- Custom elements
Tempaltes
Reusable fragments of HTML. Ignored by browsers but can be read by JS : <template> OK to use with an IE fallback.
HTML imports
Include HTML documents in an HTML document. <link rel="import" href="..."/> Blocks rendering :-( Can include multiple copies of assests. Probably going to be replaced by ES6
Shadow DOM
Allows hiding of complex markup inside an element. Video element is a good example of this, shadow DOM allows you do this yourself. element.createShadowRoot() in JS to use it. Still no agreed implementation and hard to polyfill.
Custom elements
Meaningful markup with bespoke properties, can create elements that are named after the function they perform. document.registerElement() MUST have a hyphen in it so it doens't clash with standardised elements. Add methods and properties to create an API for the custom element. ES6 classes offers a better way to do this.
is is a major sticking point. Allows us to extend existing elements - limited use cases and technical issues with implementing it.
Where are we going?
We are in the tough of disillusionment on the adoption curve - we need to climb the slope of enlightenment. This is a natural consequence of standards being discussed in the open. It's worth taking the time to get this right, it's a really big opportunity. A11y, SEO, usability is now the responsibility for developers, it's going to be abused and we're going to get crap elements. 90% of everything is crap. As responsible developers we need to follow and promote the gold standard. Check list of what a component should have. A11y is a result of following the checklist, not an item on it.
Web components should follow the Unix philosophy of doing one thing and doing it well.
Start with polymer and work out how components work before learning the implementation details. They are good enough to be used but don't make them business critical. General agreement from browsers that this is the way forward.