This document discusses how to build web applications using web components. It introduces HTML5 web components standards including templates, imports, shadow DOM, and custom elements. Templates allow cloning document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements enable extending or creating custom HTML elements. The document provides examples and demos of each standard and argues that web components enable encapsulation, separation of concerns, and element portability, advancing the capabilities of the web.

1. COMPONENTIZE YOUR
WEB APPS WITH WEB
COMPONENTS
Gil Fink
CEO and Senior Consultant, sparXys
@gilfink

2. We all love <div> soup

3. We all love <div> soup
3
Known website markup…

4. What if…

5. There’s an <element> for
that

6. About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress)
co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer

7. Agenda
• Components?
• HTML5 Web Components
o Templates
o Imports
o Shadow DOM
o Custom Elements

8. Component Definition
• A component is
o Independent software unit
o Can be composed with other components

9. Component
Characteristics
• Independent
o A component should be independent
• Composable
o All external interactions must take place through publicly defined
interfaces (API)
• Deployable
o Self-contained and must be able to operate as a stand-alone entity

10. Typical Web Page

11. Breaking The Page into
Components
Header + Toolbar
About
Main Section
What’s
new
Schedule
Summary
Recent list

12. From Design to
Implementation
Main Section
Schedule
Summary
Recent list
Component
Child Component
Child Component
Child Component
<main-section>
<schedule>
<summary>
<recent-list>

13. Components Tree
<main-section>
<schedule> <summary> <recent-list>
<main-section>
<schedule>
<summary>
<recent-list>

14. Component Types
• Stateless
• Stateful
• Routed

15. Stateless Components
• Define inputs/outputs
• Data enters via a property (input)
• Data leaves via events (output)
• Stateless/dumb/presentational
<schedule>
<summary>
<recent-list>

16. Stateful Components
• Communicate with services and states
• Don’t directly mutate states
• Render child components
• Stateful/smart/container
<main-section>

17. Routed Components
• Same as stateful component
• Includes a route definition bound to the component
<Route>
<about> <main-section> <whats-new>

18. HTML5 Web Components

19. HTML5 Web Components
• A set of standards designed to componentize the
web
• Some general goals:
Code Reuse Encapsulation
Separation of
Concerns
Composition Theming Expressive Semantic

20. The Web Components
Standards
•Reusable DOM fragmentsTemplates
•Load HTML declarativelyImports
•DOM encapsulationShadow DOM
•Create your own elements
Custom
Elements

21. Setting The Environment
• Browsers have only partial support for Web
Components
o We should use the webcomponents.js Polyfill
o Download: https://github.com/webcomponents/webcomponentsjs/
• Install using your favorite package manager
(npm/Bower/Nuget)
• Make sure the Polyfill script runs first!

22. Let’s drill down

23. Templates
• A new HTML element – template
• Can be used to instantiate document fragments
• Can wrap HTML, style tags and script tags
• No data binding support
<template id=”myTemplate”>
<div>
…
</div>
</template>

24. Cloning a Template
• Select the template and extract its content
o Use the importNode function to get the cloned content
• Only when the clone is appended to the DOM
o The style and JavaScript are executed
o Resources like images are retrieved from the server
var template = document.querySelector(‘#myTemplate’);
var clone = document.importNode(template.content, true);

25. Templates
Demo

26. Imports
• Load additional HTML documents
o Without using Ajax
• A new type of link tag
• Use the rel attribute with the import type:
<link rel=”import” href=”myImport.html”>

27. Imports and Bundling
• Enable to bundle a full component into one HTML
file
o The HTML can include scripts and CSS styles
• The whole bundle can be retrieved in a single call

28. Imports and The DOM
• Importing a document doesn’t include it into the
DOM
o It will parse it in memory and load all the additional resources
• Use the import property of the link tag:
var content = document.querySelector(‘link[rel=”import”]’).import;

29. Imports
Demo

30. Import Additional Notes
• Scripts running inside the import can reference the
containing document by calling
document.currentScript.ownerDocument
• CORS constraints apply to documents imported
from other domains

31. Shadow DOM
• Encapsulate DOM parts
o The browser will know how to present those parts
o The browser won’t show the encapsulated parts in the source code
• Creates a boundary between the component and
its user

32. The Problems Shadow
DOM Tries to Solve
• Encapsulation of components/widgets
• Style leakage
o Leaks from one component to another
o Leaks from imported 3th party library/framework
• Global DOM
o id or class attributes all over the place

33. Shadow DOM in The
Browser
<video src="media/myVideo.mp4" controls></video>
<input type="date">

34. Shadow DOM – Cont.
• Use the createShadowRoot function to wrap an
element as a shadow DOM:
var host = document.querySelector(‘#shadowDOMHost’);
var root = host.createShadowRoot();
root.innerHTML = ‘<div>Lurking in the shadows</div>’;

35. Styling Shadow DOM
• :host and :host() pseudo-class
• ::content pseudo-element
<div name="myElement">
<style>
:host {
border: 1px solid lightgray;
}
</style>
<template>...</template>
</div>

36. Shadow DOM
Demo

37. Custom Elements
• Enable to extend or to create custom HTML
elements
o The new element must inherit from HTMLElement
• Create a custom element using the registerElement
function:
• Extend an existing element:
var myElement = document.registerElement(‘my-element’);
var myInput = document.registerElement(‘my-input’, {
prototype: Object.create(HTMLInputElement.prototype),
extends: ‘input’
});

38. Custom Elements –
Naming
• You can create named elements (almost) any way
you want:
o Same naming rules as other HTML tags
o There must be a dash (“-”) in the name
• To future-proof the name against the HTML standard
• To avoid naming collisions

39. Custom Elements – Usage
• Use the element in your DOM:
or use the createElement function:
<my-input></my-input>
var elm = document.createElement(‘my-input’);

40. Custom Element
Callbacks
• Custom elements have life cycle events:
• createdCallback
o Called when an instance is created
• attachedCallback
o Called when an instance is added to DOM subtree
• detachedCallback
o Called when an instance is removed from a DOM subtree
• attributeChangedCallback
o Called after an attribute value changes

41. Custom Elements
Demo

42. The Current State of Web
Components
• Still W3C Working Drafts
• Browser support:
http://caniuse.com/#search=web%20components
• Main libraries:
Polymer X-Tag

43. Summary
• Web Components are emerging standards that
enables:
• Encapsulation
• Separation of Concerns
• Element portability
• And more
• Taking the web one step forward!

44. Resources
• http://webcomponents.org/
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink

45. Thank You!