Web Components allow developers to build reusable custom elements that encapsulate HTML, CSS, and JavaScript. They include features like Shadow DOM for encapsulation, templates for stamping out repeated sections, HTML imports for modular code, and custom elements for defining new types of elements. Polymer makes it easy to build web applications using these new web component standards by providing polyfills and a set of pre-built reusable elements.

1. Web Components
What? Why? Polymer?
Rich Bradshaw - Focal Strategy - @richbradshaw

2. Why do I care about this?
• You are a HTML “user” - this will help you do more advanced things easily
• You are a front end dev - you want to reuse components across sites/pages
• You build single page apps (SPAs) and want a better way to organise things
• You are interested in the direction that the web platform is heading

3. • What are the conventions of HTML? Plan
• How do we build ‘components’ at the moment?
• What are the limitations of the current approach?
Questions/short break
• What’s in the Web Components spec?
• What components exist already?
Questions/short break
• What’s Polymer?
• Let’s build an app using Polymer

4. Conventions in HTML

5. Elements can fire events, and have public properties

6. Elements are configured using attributes.
Elements can be nested, and can only make sense
if they are nested.

7. Some elements are not visual.
Elements can have methods.

8. Some elements can provide complex behaviour.

9. Some elements have surprisingly complete
APIs, that been there since, well, forever.

10. Summary
Elements:
• Are configured by attributes
• Can fire events
• Can have their own methods and properties
• Are not always visible (e.g. meta, track, media)
• Can be required to be within another element
Check out: https://developer.mozilla.org/en-US/docs/Web/API

11. How do we build ‘components’
at the moment?

12. Component?
• Self contained part of a page
• Google Map, Youtube Video,
Carousel, Accordion, Nav Bar………

13. + some CSS in ‘global’ scope
+ JS with public and private
variables/methods
jQuery Cycle

14. Google Maps

15. Advanced YouTube Embed

16. Problems
• Not that user friendly ( jQuery isn’t bad)
• Not easy to ensure assets aren’t loaded multiple times
• Hard to link together
• Hard for plugins to hide their CSS from the rest of the page

17. Inconsistency
HTML Current Plugins
Config Attributes Javascript
Events Listen to element Listen to framework events
Methods/Props On element From framework
Interop Any framework Only same framework

18. Questions so far?

19. Web Components

20. Custom Elements HTML Imports
Templates Shadow DOM
BTW, there’s a polyfill for each - IE10+ and current version of all others

21. Shadow DOM
Encapsulate the content of the DOM. Private JS/CSS for HTML.

22. A number input: Same ID in every instance
Shadow DOM

23. Shadow DOM

24. Shadow DOM
+
=

25. Browser support = 42.2% http://caniuse.com/#feat=shadowdom
Shadow DOM

26. Templates
Inert bits of HTML/CSS/JS that can be stamped out as needed.
Like a native version of Handlebars/Mustache/Hogan.

27. Templates
Broken image won’t cause
error as this is inert
Fill it in, stamp it out

28. +
You could now swap the template out without changing the page markup…
Templates

29. Templates
CSS Selectors

30. Browser support = 54.4% http://caniuse.com/#feat=template
Templates

31. HTML Imports
You can import CSS, JS, images, video and audio already - why
not HTML?

32. How to load HTML
• iframe = limited
• ajax = OK but needs JS
• pretending via <script type=‘x-template’>

33. Browser dedupes for you. Can be from another domain.
Can be changed/created by JS.
Content accessible via JS, ideal for templates.
HTML Imports

34. Browser support = 35.3% http://caniuse.com/#feat=imports
HTML Imports

35. Custom Elements
Put all that together…

36. Custom Elements

37. Custom elements
• Name must contain a dash
• Default is to inherit from HTMLElement
• Can extend native elements!
• Can have methods, properties, events as native elements do
• Can target unresolved elements to hide with CSS to avoid FOUC

38. Browser support = 38.4% http://caniuse.com/#feat=custom-elements
Custom Elements

39. Existing Components

40. Really good list at: http://customelements.io/

41. Questions so far?
http://webcomponents.org/
http://customelements.io/
http://caniuse.com/

42. Polymer

43. Polymer
• Everything is an element
• Comes with the basics (e.g. menus, buttons etc)
• Two way data binding (on everything…)
• Includes platform.js, polyfill for all we’ve talked about,
object.observe, new web animation spec, pointer events and more.

45. Demo Time!

46. Find out more…
• http://updates.html5rocks.com/tag/web-components
• http://w3c.github.io/webcomponents/explainer/
• Spec: @coonsta, @dglazkov
• Tools, articles: @ebidel, @addyosmani
• Components Registry: http://customelements.io/ by @zenorocha
• http://www.polymer-project.org/
• http://www.x-tags.org/, http://mozilla.github.io/brick/
• Freenode #webcomponents