Web components provide a set of new web platform APIs for building reusable custom elements with encapsulated styles and markup. These include Shadow DOM for encapsulation, HTML templates for structure, custom elements for extending HTML, and HTML imports for reusable components. The major browser vendors are supporting these new standards, including Chrome, Firefox and Safari. Frameworks like Polymer and X-Tags make it easier to build components with these new APIs.

1. Client-sideApps
FromThe Future

2. WebComponents
NowIntroducing

3. SupportIsStrong
WithThisOne

4. Chrome
Firefox
Safari

5. Polymer&X-Tags

6. Dart
AKAthatGoogle thingthathad1759linesin aHello World App

7. WhatAreYou

8. ShadowDOM -Encapsulation
HTMLTemplates-Structure/Scaffolding
CustomElements-ExtendTheDOM
HTMLImports

9. ShadowDOM

11. Example

13. HTMLTemplates

14. Parsed But
NotRenderedIt'sjust DOM...

15. Example

17. CustomElements

18. Justlike anyol'
trustyHTML Tag

19. Declarative
and
Imperative

20. DeclarativeAPI

21. ImperativeAPI

22. ShadowDOM+
CustomElements

24. HTMLImports

27. ModelDrivenViews

28. Sources
-W3C Web Components Spechttp://www.w3.org/TR/2013/WD-components-intro-
20130606/
-Polymerhttp://www.polymer-project.org/
-X-tagshttp://ui.x-tags.org/
-WebComponents by Eric Bidleman http://html5-demos.appspot.
com/static/webcomponents/index.html#1
-ShadowDOM 101 http://www.html5rocks.
com/en/tutorials/webcomponents/shadowdom/