The document discusses the evolution of web technologies from HTML in the 1990s to modern web components. It provides an overview of key web component standards including custom elements, HTML imports, templates, and shadow DOM. These emerging standards allow developers to encapsulate and extend HTML in order to build reusable, encapsulated UI components.

1. Web components
October

2. 2014
Dmitry

3. Bakaleinik

4.
dmitry.bakaleinik@gmail.com

5.
@demongloom

6. HTML was very lean, with very basic
data display and entry.
It was clear which was better.
It could be mastered by people who
were not good programmers — or
even programmers at all.
You could make something that
looked OK pretty quickly.
HTML and the World Wide Web started
in the early 1990's.
Version 1.0 of the first popular,
dominant commercial browser,
Netscape Navigator, was released in
December 1994.
It supported very simple HTML, which
included simple styling and
simple forms for data entry.
Later versions in 1995 added tables,
cookies, and very early JavaScript.
Microsoft released its first browser in
1995.
At this point, extremely rich applications
could be written in
C++, Visual Basic, or any of many
programming systems.
Web in 1990s,
HTML pages were lean and simple

7. The HTML could be mastered
by people who were
not good programmers or
even programmers at all

8. You could make something
that looked OK
pretty quickly

10. HTML Elements are encapsulated

11. HTML Elements are configurable

12. Even more configuration!

13. HTML Elements composition

14. HTML Elements are programmable

15. jQuery
Mootools
Prototype
Dojo
ExtJS
AngularJS
Web in 2000s,
Backbone
rapid growth of UI frameworks

16. JavaScript dominates the
web’s programming
landscape.

17. Instead writing HTML,
we’re writing more
JavaScript.

18. What is broken
in the web today?

19. Tabs:

20. a

21. common

22.
component

23. on

24. the

25. web

26. Dojo

27. Backbone

28. Ember
Ember

29. ExtJS
ExtJS

30. Angular

31. jQuery UI tabs

32. Our HTML is terrible

34. Our HTML is terrible

36. Our HTML is terrible

40. Can we do better?

41. Back to HTML

42. What we’re used before

43. Why not just mega-button?

44. The component model for Web
Custom
Elements
Let authors define their own elements,
with new tag names and new script interfaces.
Defines how templates and custom elements are packaged and loaded as a resource.
Define chunks of markup that are inert but can be activated for use later.
HTML
Templates
HTML
Imports
Shadow
DOM

45. Web components are set of
emerging standards
that allow developers to
extend html

46. Can I use web components?
Templates ✓ ✓ ✓ ✗ ✗
Shadow
DOM ✓ ✓ ✗ ✓ ✗
Custom
Elements ✓ ✓ ✓ ✗ ✗
Imports ✓ ✓ ✗ ✗ ✗

47. New web technology
detection easy way
• Try it out on Internet Explorer
• Did it work?
• No?
• It’s a new web technology

48. Custom Elements
Let authors define their own elements,
with new tag names and new script interfaces.

49. Defining custom element
The

50. name

51. must

52. contain

53. a

54. dash

55. (-)

56. Extending custom element

57. Custom element lifecycle

58. Observe attribute changes

59. Styling custom element
no

60. dot

62.
in

63. selector

65. HTML Imports
Defines how templates and custom elements are
packaged and loaded as a resource.

66. Custom element html file
mega-button.html

67. Importing custom element

69. Detecting broken elements

70. Template
Define chunks of markup that are inert
but can be activated for use later.

71. The template element
declares fragments
of HTML that can be
cloned and inserted
by script

72. In a rendering, the template
element represents nothing

73. Template declaration

74. Using a template

75. Shadow DOM
Encapsulates a DOM subtree for more reliable
composition of user interface elements.

76. The fundamental problem
that makes widgets built out of
HTML and JavaScript hard to use:

77. The DOM tree inside a widget
isn’t encapsulated from
the rest of the page

79. This lack of encapsulation means
your document stylesheet might
accidentally apply to parts
inside the widget

80. Your JavaScript
might accidentally modify
parts inside the widget

81. Your IDs
might overlap with IDs
inside the widget
and so on

82. Shadow DOM
addresses the DOM tree
encapsulation problem

83. With Shadow DOM, elements
can get a new kind of node
associated with them

84. This new kind of node is called a
shadow root

85. An element that has a shadow root
associated with it is called a shadow host

86. The content of a shadow host isn’t rendered;
the content of the shadow root is rendered instead

87. The content of a shadow host isn’t rendered;
the content of the shadow root is rendered instead

89. Shadow DOM usage

90. Thanks!