-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
308 lines (285 loc) · 9.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/highlight.css">
<link rel="stylesheet" href="css/slides.css">
<title>Using Custom Elements: From zero to foo</title>
</head>
<body>
<x-fullscreen></x-fullscreen>
<x-deck>
<!--FIRST-->
<x-slide class="teal" in="zoomIn" out="rollOut">
<section class="center">
<h1 class="big">From zero to <code><foo></foo></code></h1>
<h2 class="upper normal">Introduction to Custom Elements v1</h2>
<x-ascii face="dance" size="150"></x-ascii>
</section>
</x-slide>
<!--SALUTATION-->
<x-slide class="blue" in="zoomIn" out="bounceOut">
<section>
<h2>Hello</h2>
<h2>Cześć</h2>
<h2>прывітанне</h2>
<h2>привет</h2>
<h2>नमस्ते</h2>
<h2>你好</h2>
</section>
<section class="center">
<h1 class="huge">Hola <x-ascii face="shrug"></x-ascii></h1>
<h4 class="upper">I'm Ricardo Casares</h4>
<p class="upper">Senior Software Engineer @ EPAM</p>
</section>
</x-slide>
<!--WHAT?-->
<x-slide class="lime">
<section class="center">
<x-ascii face="what" size="150"></x-ascii>
<h1 class="upper">Custom elements you say?</h1>
</section>
</x-slide>
<!--DO'S-->
<x-slide class="green">
<section class="center">
<div class="green huge">✓</div>
</section>
<section>
<h1 class="upper">Custom elements do</h1>
<ul class="check">
<li>Let you define your own HTML tags bundled with JS behavior</li>
<li>Trigger lifecycle callbacks</li>
<li>Automatically upgrade your tag when inserted in the document</li>
</ul>
</section>
</x-slide>
<!--DONT's-->
<x-slide class="red">
<section class="center">
<div class="red huge">⃠</div>
</section>
<section>
<h1 class="upper">Custom elements don't</h1>
<ul class="nope">
<li>Scope CSS styles</li>
<li>Scope JavaScript</li>
<li>Play nice with user defined markup</li>
</ul>
</section>
</x-slide>
<!--SPEC-->
<x-slide class="green">
<section>
<h1 class="upper">V1 Specification</h1>
<p>W3C Editor's Draft 13 February 2017</p>
</section>
<section>
<pre>
<code class="javascript">
class Foo extends HTMLElement {
// called when the element is created or upgraded
constructor() {
super()
}
// called when the element is connected to the DOM
connectedCallback () {}
// called when any attribute changes
// triggers before connectedCallback
attributeChangedCallback (attr, prev, curr) {}
// set of attributes that will trigger the changed callback
static get observedAttributes() {
return ['my', 'attributes']
}
// called when adopted on a new document
adoptedCallback() {}
// called when the element is disconnected from the DOM
disconnectedCallback () {}
}
</code>
</pre>
</section>
</x-slide>
<!--AUTONOMOUS ELEMENTS-->
<x-slide class="indigo">
<section>
<h1 class="upper">Autonomous elements</h1>
<ul class="careless">
<li>Do it all by yourself</li>
<li>No default accessibility</li>
<li>No default behaviors</li>
<li>No default visual styles</li>
</ul>
<pre><code class="html">
<foo tabindex="1" aria-label="foo" aria-disabled etc... >
// To implement all this is hard and sometimes impossible
</foo>
</code></pre>
</section>
<section class="center">
<x-ascii face="careless" size="200"></x-ascii>
</section>
</x-slide>
<!--CUSTOMIZED ELEMENTS-->
<x-slide class="pink">
<section>
<h1 class="upper">Customized built-ins</h1>
<ul class="love">
<li>Allow reuse of existing HTML elements behaviors</li>
<li>Provide already implemented accessibility features</li>
<li>Allow custom behaviour, hooks, and prototype chain</li>
</ul>
<pre><code class="javascript">
class Foo extends HTMLButtonElement {}
customElements.define('x-foo', Foo, {extends: 'button'})
const fooButton = document.createElement('button', {is: 'x-foo'})
</code></pre>
<pre><code class="html">
<x-foo></x-foo> or <button is="x-foo"></button>
</code></pre>
</section>
<section class="center">
<x-ascii face="love" size="140"></x-ascii>
</section>
</x-slide>
<!--EXTENDING ELEMENTS-->
<!--<x-rolling>
<section>
<h1>Hi there</h1>
<h4>You guys are awesome</h4>
</section>
</x-rolling>-->
<!--GOTCHAS-->
<x-slide class="red">
<section>
<h1 class="upper">Constructor gotchas</h1>
<ul class="gotcha">
<li>You must call <code>super()</code> first</li>
<li>You can't <code>return</code> anything, except for <code>this</code></li>
<li>You can't inspect element attributes or children</li>
<li>You can't add any attributes or children</li>
<li>Just use it to initialize default state and/or observers</li>
<li>All work should be deferred to <code>connectedCallback()</code>, but be aware this method can be called multiple times</li>
</ul>
</section>
<section>
<x-ascii face="disapprove" size="200"></x-ascii>
</section>
</x-slide>
<!--CODE HANDS ON-->
<x-slide class="cyan">
<section>
<h1 class="upper">Hands on!</h1>
<p>A line of code is worth 1000 slides</p>
<a href="https://bit.ly/customElements" class="large">
bit.ly/customElements
</a>
</section>
</x-slide>
<!--SUPPORT-->
<x-slide class="orange">
<section>
<h1 class="upper">Browser support</h1>
<div class="support">
<div class="browser">
<div>IE</div>
<div class="red">11</div>
</div>
<div class="browser">
<div>Edge</div>
<div class="red">14</div>
<div class="red">15</div>
</div>
<div class="browser">
<div>Firefox</div>
<div class="red">52</div>
<div class="red">53</div>
<div class="red">54</div>
<div class="red">55</div>
</div>
<div class="browser">
<div>Chrome</div>
<div class="lime">56</div>
<div class="lime">57</div>
<div class="lime">58</div>
<div class="lime">59</div>
</div>
<div class="browser">
<div>Safari</div>
<div class="red">10</div>
<div class="lime">10.1</div>
<div class="lime">TP</div>
</div>
<div class="browser">
<div>Opera</div>
<div class="green">43</div>
<div class="green">44</div>
<div class="green">45</div>
</div>
</div>
<div class="support">
<div class="browser">
<div>IE Mobile</div>
<div class="red">11</div>
</div>
<div class="browser">
<div>Opera Mobile</div>
<div class="red">37</div>
</div>
<div class="browser">
<div>Firefox for Android</div>
<div class="red">51</div>
</div>
<div class="browser">
<div>Chrome for Android</div>
<div class="green">56</div>
</div>
<div class="browser">
<div>iOS Safari</div>
<div class="red">10.2</div>
</div>
<div class="browser">
<div>Android Browser</div>
<div class="red">53</div>
</div>
</div>
<p><small>caniuse.com</small></p>
</section>
</x-slide>
<!--CRYFACE-->
<x-slide class="yellow">
<section class="center">
<x-ascii face="cry" size="300"></x-ascii>
</section>
</x-slide>
<!--POLYFILL-->
<x-slide class="green" in="rotateIn" out="rotateOut">
<section class="center">
<x-ascii face="shrug" size="200"></x-ascii>
<h1 class="upper">Polyfill all the things!</h1>
</section>
</x-slide>
<!--SAY THANKS-->
<x-slide class="violet" in="rotateIn" out="rotateOut">
<section class="center">
<x-ascii face="bear" size="200"></x-ascii>
<h1 class="upper">Thank you!</h1>
</section>
</x-slide>
</x-deck>
<script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.0.0-rc.3/custom-elements.min.js"></script>
<script src="lib/high.js"></script>
<script src="lib/high-js.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="src/Base.js"></script>
<script src="src/Deck.js"></script>
<script src="src/Slide.js"></script>
<script src="src/Ascii.js"></script>
<script src="src/Fullscreen.js"></script>
<script src="src/RollingSlide.js"></script>
<script src="src/DragBag.js"></script>
<script src="src/DropZone.js"></script>
</body>
</html>