This is an introduction talk where we will look at the basics of Web Components.

1. A Brave
New Web

2. @gdemey & @michieldemey

4. Web Components

5. What are Web
Components?
"Web Components is asetof specs which let
web developers leverage their HTML, CSS and
JavaScriptknowledge to build widgets thatcan
be reused easily and reliably."

6. Templates
Standardized client-side templating
Shadow DOM
DOM tree encapsulation
Custom Elements
Create new semantic HTML elements
Imports
Importchunks of HTML or entire components

7. <link rel="import" href="elements/x-blink.html">
<x-blink>
Blink!
</x-blink>
Blink!

8. <link rel="import" href="elements/qr-code.html">
<qr-code data="http://demey.io"></qr-code>

9. Ancient
history

10. Java Applets
& Flash Controls

11. ASP.NET Web Controls
<asp:control_name id="some_id" runat="server">
</asp:control_name>

12. jQuery
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function () {
$('#datepicker').datepicker();
});
</script>
Date: <input type="text" id="datepicker">
1
2
3
4
5
6
7
8
9
10
11

14. Angular
Two-waydata-bound transcluded isolate scope directives.
myApp.directive('qrCode', function () {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'components/qrcode/qrcode.html',
link: function (scope, element, attributes) {
// do stuff here
}
};
});
1
2
3
4
5
6
7
8
9
10
11
12

15. HTML
Templates

16. HTML templates:
Declaration
<template id="commentTemplate">
<img src="">
<div class="comment-text"></div>
</template>
1
2
3
4
5
1. Scripts aren'texecuted, images aren'tdownloaded, DOM isn't
rendered
2. you can'ttraverse into them from outside

17. Templates
are a blueprint

18. HTML templates: Usage
<script>
function addComment(imageUrl, text) {
var content = document.querySelector('#commentTemplate').content;
var image = content.querySelector('img');
var comment = content.querySelector('.comment-text');
image.src = imageUrl;
comment = text;
var insertPoint = document.querySelector('.templates-demo-yield');
insertPoint.appendChild(content.cloneNode(true));
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

19. HTML templates: Demo
Add Comment

20. Shadow DOM

21. Isolates Component Markup
No overlap with page functionalityand other styles.

22. Shadow DOM
is the sandbox

23. Custom Elements

24. Custom Element
Definition
<element name="hello-world" constructor="HelloWorld">
<div>Hello World!</div>
<script>
this.register({
prototype: {
readyCallback: function () {
// Component is ready
},
announce: function () { alert('Hello World!'); }
}
});
</script>
</element>
<hello-world></hello-world>

25. CustomCustom
ElementsElements
are the backbone

26. HTML Imports

27. Why imports?
CSS
<link rel="stylesheet">
Javascript
<script>
HTML
<link rel="import">

28. HTML imports
Notlimited to markup, can contain CSS and Javascript
Imports are subjectto access control(CORS)

29. Support

30. April 30th
Polymer