WEBVTT

1
00:00:05.100 --> 00:00:11.700
<00:00:05.100>It <00:00:06.500>okay.

2
00:00:09.700 --> 00:00:12.300
<00:00:09.700>Good <00:00:11.100>morning

3
00:00:12.300 --> 00:00:13.200
<00:00:12.300>Gates, <00:00:13.110>Berlin.

4
00:00:16.600 --> 00:00:18.000
<00:00:16.600>Too <00:00:16.852>much <00:00:17.104>party <00:00:17.356>last <00:00:17.608>night, <00:00:17.860>right?

5
00:00:19.100 --> 00:00:22.800
<00:00:19.100>Probably <00:00:19.216>I <00:00:19.333>would <00:00:19.450>have <00:00:19.566>loved <00:00:19.683>to <00:00:19.800>be <00:00:19.916>there <00:00:20.033>as <00:00:20.150>well. <00:00:20.266>But <00:00:20.383>yeah, <00:00:20.500>I

6
00:00:22.800 --> 00:00:25.100
<00:00:22.800>had <00:00:22.927>to <00:00:23.054>be <00:00:23.181>here <00:00:23.309>and <00:00:23.436>give <00:00:23.563>this <00:00:23.690>talk <00:00:23.818>to <00:00:23.945>you. <00:00:24.072>So <00:00:24.200>I

7
00:00:25.100 --> 00:00:26.600
<00:00:25.100>wanted <00:00:25.437>to <00:00:25.775>prepare <00:00:26.112>very <00:00:26.450>well.

8
00:00:27.600 --> 00:00:30.300
<00:00:27.600>First <00:00:27.775>of <00:00:27.950>all, <00:00:28.125>we <00:00:28.300>have <00:00:28.475>something <00:00:28.650>to <00:00:28.825>celebrate <00:00:29.000>today.

9
00:00:31.900 --> 00:00:32.300
because

10
00:00:43.900 --> 00:00:46.300
<00:00:43.900>Today <00:00:44.133>is <00:00:44.366>the <00:00:44.600>day. <00:00:44.833>We <00:00:45.066>are <00:00:45.300>getting

11
00:00:46.300 --> 00:00:49.200
<00:00:46.300>rid <00:00:46.474>of <00:00:46.650>Internet <00:00:46.824>Explorer <00:00:47.000>11. <00:00:47.175>And <00:00:47.349>for <00:00:47.525>this <00:00:47.699>talk,

12
00:00:49.200 --> 00:00:52.200
<00:00:49.200>I <00:00:49.375>was <00:00:49.550>thinking <00:00:49.725>like <00:00:49.900>okay <00:00:50.075>web <00:00:50.250>components <00:00:50.425>are <00:00:50.600>not

13
00:00:52.200 --> 00:00:53.400
<00:00:52.200>supported <00:00:52.740>by <00:00:53.280>ie

14
00:00:54.100 --> 00:00:57.100
<00:00:54.100>Should <00:00:54.216>I <00:00:54.333>talk <00:00:54.450>about <00:00:54.566>polyfills <00:00:54.683>or <00:00:54.800>not? <00:00:54.916>And <00:00:55.033>then <00:00:55.150>I <00:00:55.266>saw <00:00:55.383>this <00:00:55.500>again

15
00:00:57.100 --> 00:00:57.500
<00:00:57.100>is <00:00:57.460>like

16
00:00:58.100 --> 00:00:59.100
<00:00:58.100>it <00:00:58.250>saves <00:00:58.400>me <00:00:58.550>a <00:00:58.700>lot <00:00:58.850>of <00:00:59.000>time.

17
00:01:00.100 --> 00:01:01.300
<00:01:00.100>The <00:01:00.370>internet <00:01:00.640>is <00:01:00.910>great. <00:01:01.180>So

18
00:01:02.900 --> 00:01:05.200
<00:01:02.900>You <00:01:03.055>can <00:01:03.211>see <00:01:03.366>this <00:01:03.522>for <00:01:03.677>the <00:01:03.833>last <00:01:03.988>time <00:01:04.144>say <00:01:04.300>bye-bye.

19
00:01:12.500 --> 00:01:13.600
<00:01:12.500>So <00:01:12.830>hi. <00:01:13.160>I'm <00:01:13.490>rowdy.

20
00:01:15.300 --> 00:01:18.400
<00:01:15.300>I'm <00:01:15.475>a <00:01:15.649>front-end <00:01:15.825>Focus <00:01:16.000>senior <00:01:16.175>devops <00:01:16.350>engineer <00:01:16.524>with <00:01:16.700>special

21
00:01:18.400 --> 00:01:21.300
<00:01:18.400>tension <00:01:18.555>for <00:01:18.711>accessibility. <00:01:18.866>I <00:01:19.022>try <00:01:19.177>to <00:01:19.333>add <00:01:19.488>a <00:01:19.644>word <00:01:19.800>every

22
00:01:21.300 --> 00:01:21.400
week.

23
00:01:22.900 --> 00:01:23.300
<00:01:22.900>Why <00:01:23.259>not?

24
00:01:24.200 --> 00:01:28.000
<00:01:24.200>And <00:01:24.340>I've <00:01:24.480>been <00:01:24.620>a <00:01:24.760>Formula <00:01:24.900>One <00:01:25.040>geek <00:01:25.180>since <00:01:25.320>1994 <00:01:25.460>when <00:01:25.600>the

25
00:01:27.400 --> 00:01:30.100
<00:01:27.400>father <00:01:27.680>of <00:01:27.960>our <00:01:28.240>current <00:01:28.520>world <00:01:28.800>champion.

26
00:01:31.200 --> 00:01:33.000
<00:01:31.200>Got <00:01:31.433>roasted <00:01:31.666>a <00:01:31.900>little <00:01:32.133>bit <00:01:32.366>in <00:01:32.600>Germany.

27
00:01:34.200 --> 00:01:37.200
<00:01:34.200>But <00:01:34.433>if <00:01:34.666>I <00:01:34.900>actually <00:01:35.133>the <00:01:35.366>love <00:01:35.600>for

28
00:01:37.200 --> 00:01:40.400
<00:01:37.200>Formula <00:01:37.316>One <00:01:37.433>brought <00:01:37.550>me <00:01:37.666>to <00:01:37.783>the <00:01:37.900>web <00:01:38.016>because <00:01:38.133>in <00:01:38.250>1996 <00:01:38.366>I <00:01:38.483>got <00:01:38.600>access

29
00:01:40.400 --> 00:01:40.900
<00:01:40.400>to <00:01:40.625>the <00:01:40.850>web.

30
00:01:42.100 --> 00:01:44.500
<00:01:42.100>Through <00:01:42.300>a <00:01:42.500>modem. <00:01:42.699>But <00:01:42.899>yeah, <00:01:43.100>well, <00:01:43.300>it's <00:01:43.500>something

31
00:01:45.300 --> 00:01:48.400
<00:01:45.300>and <00:01:45.393>I <00:01:45.486>figured <00:01:45.580>out <00:01:45.673>what <00:01:45.766>what <00:01:45.860>do <00:01:45.953>I <00:01:46.046>want <00:01:46.140>to <00:01:46.233>do? <00:01:46.326>So <00:01:46.420>I <00:01:46.513>started <00:01:46.606>creating <00:01:46.700>my

32
00:01:48.400 --> 00:01:48.900
<00:01:48.400>own <00:01:48.850>software.

33
00:01:49.700 --> 00:01:52.000
<00:01:49.700>I <00:01:49.855>also <00:01:50.011>did <00:01:50.166>some <00:01:50.322>Boland <00:01:50.477>Delphi <00:01:50.633>back <00:01:50.788>in <00:01:50.944>the <00:01:51.100>day.

34
00:01:52.800 --> 00:01:56.100
<00:01:52.800>And <00:01:53.000>I <00:01:53.200>created <00:01:53.399>Formula <00:01:53.600>One <00:01:53.800>Explorer <00:01:54.000>and <00:01:54.200>back

35
00:01:55.100 --> 00:01:58.300
<00:01:55.100>in <00:01:55.274>the <00:01:55.449>day. <00:01:55.625>It <00:01:55.800>was <00:01:55.975>very <00:01:56.149>hip <00:01:56.324>to <00:01:56.500>call

36
00:01:58.300 --> 00:02:01.800
<00:01:58.300>it <00:01:58.500>Formula <00:01:58.700>One <00:01:58.899>Explorer <00:01:59.100>2000 <00:01:59.300>because <00:01:59.500>2000 <00:01:59.700>was

37
00:02:01.800 --> 00:02:02.000
coming.

38
00:02:02.900 --> 00:02:05.000
<00:02:02.900>you <00:02:03.180>might <00:02:03.460>see <00:02:03.740>as <00:02:04.020>well <00:02:04.300>that

39
00:02:06.300 --> 00:02:08.900
<00:02:06.300>It <00:02:06.533>was <00:02:06.766>optimized <00:02:07.000>for <00:02:07.233>Internet <00:02:07.466>Explorer <00:02:07.700>4.

40
00:02:10.300 --> 00:02:13.900
<00:02:10.300>That's <00:02:10.393>what <00:02:10.486>we <00:02:10.580>did <00:02:10.673>back <00:02:10.766>in <00:02:10.860>the <00:02:10.953>day <00:02:11.046>and <00:02:11.140>also <00:02:11.233>say <00:02:11.326>well <00:02:11.420>800 <00:02:11.513>by <00:02:11.606>600 <00:02:11.700>fortunately

41
00:02:13.900 --> 00:02:16.800
<00:02:13.900>those <00:02:14.180>days <00:02:14.460>are <00:02:14.740>over <00:02:15.020>the <00:02:15.300>fun

42
00:02:16.800 --> 00:02:17.300
<00:02:16.800>part <00:02:16.950>of <00:02:17.100>this <00:02:17.250>is

43
00:02:18.100 --> 00:02:21.100
<00:02:18.100>I <00:02:18.333>got <00:02:18.566>in <00:02:18.799>an <00:02:19.033>Indonesian <00:02:19.266>Autosport <00:02:19.500>newspaper.

44
00:02:21.800 --> 00:02:23.300
<00:02:21.800>With <00:02:22.137>my <00:02:22.475>software <00:02:22.812>like <00:02:23.150>what?

45
00:02:24.800 --> 00:02:28.400
<00:02:24.800>And <00:02:24.940>back <00:02:25.080>in <00:02:25.220>the <00:02:25.360>day, <00:02:25.500>we <00:02:25.640>had <00:02:25.780>magazines <00:02:25.920>that <00:02:26.060>had <00:02:26.200>CD-ROMs

46
00:02:27.400 --> 00:02:30.500
<00:02:27.400>with <00:02:27.600>it <00:02:27.800>and <00:02:28.000>the <00:02:28.200>program <00:02:28.400>was <00:02:28.600>also <00:02:28.800>on

47
00:02:30.500 --> 00:02:30.800
there.

48
00:02:32.300 --> 00:02:35.300
<00:02:32.300>But <00:02:32.533>well, <00:02:32.766>I <00:02:33.000>still <00:02:33.233>enjoy <00:02:33.466>it <00:02:33.700>very

49
00:02:35.300 --> 00:02:38.500
<00:02:35.300>much, <00:02:35.475>but <00:02:35.650>I <00:02:35.825>don't <00:02:36.000>buy <00:02:36.175>don't <00:02:36.350>create <00:02:36.525>any <00:02:36.700>software

50
00:02:38.500 --> 00:02:39.400
<00:02:38.500>more <00:02:38.905>about <00:02:39.310>it.

51
00:02:40.700 --> 00:02:41.000
so

52
00:02:43.300 --> 00:02:44.500
<00:02:43.300>it <00:02:43.660>was <00:02:44.020>mentioned <00:02:44.380>already.

53
00:02:45.100 --> 00:02:49.200
<00:02:45.100>We <00:02:45.227>have <00:02:45.354>a <00:02:45.481>lot <00:02:45.609>of <00:02:45.736>JavaScript <00:02:45.863>Frameworks <00:02:45.990>like <00:02:46.118>angular <00:02:46.245>view <00:02:46.372>as <00:02:46.500>felt

54
00:02:48.200 --> 00:02:49.700
<00:02:48.200>and <00:02:49.549>react.

55
00:02:51.200 --> 00:02:51.500
and

56
00:02:52.700 --> 00:02:55.400
<00:02:52.700>let <00:02:52.875>me <00:02:53.049>buy <00:02:53.225>a <00:02:53.399>show <00:02:53.575>of <00:02:53.750>hand. <00:02:53.924>See <00:02:54.100>how

57
00:02:55.400 --> 00:02:58.200
<00:02:55.400>many <00:02:55.575>people <00:02:55.750>are <00:02:55.925>working <00:02:56.100>with <00:02:56.275>these <00:02:56.450>kinds <00:02:56.625>of <00:02:56.800>Frameworks.

58
00:02:59.900 --> 00:03:01.500
<00:02:59.900>Yeah, <00:03:00.250>quite <00:03:00.600>quite <00:03:00.950>a <00:03:01.300>few.

59
00:03:02.400 --> 00:03:05.600
<00:03:02.400>So <00:03:02.540>as <00:03:02.680>mentioned <00:03:02.820>you <00:03:02.960>probably <00:03:03.100>know <00:03:03.240>what <00:03:03.380>a <00:03:03.520>component <00:03:03.660>is, <00:03:03.800>but

60
00:03:05.600 --> 00:03:09.500
<00:03:05.600>just <00:03:05.755>to <00:03:05.911>be <00:03:06.066>sure <00:03:06.222>a <00:03:06.377>component <00:03:06.533>should <00:03:06.688>be <00:03:06.844>a <00:03:07.000>reusable

61
00:03:09.500 --> 00:03:13.000
<00:03:09.500>isolated <00:03:09.700>part <00:03:09.900>of <00:03:10.100>UI <00:03:10.300>with <00:03:10.500>one <00:03:10.700>specific <00:03:10.900>responsibility

62
00:03:12.100 --> 00:03:15.300
<00:03:12.100>one <00:03:12.799>not <00:03:13.500>more.

63
00:03:19.400 --> 00:03:22.400
<00:03:19.400>Web <00:03:19.575>components <00:03:19.750>are <00:03:19.925>components <00:03:20.100>as <00:03:20.275>well. <00:03:20.450>But <00:03:20.625>without <00:03:20.800>using

64
00:03:22.400 --> 00:03:23.400
<00:03:22.400>the <00:03:23.300>Frameworks.

65
00:03:24.500 --> 00:03:27.100
<00:03:24.500>And <00:03:24.700>web <00:03:24.900>components <00:03:25.100>are <00:03:25.300>consistent <00:03:25.500>of <00:03:25.700>three <00:03:25.900>parts.

66
00:03:27.800 --> 00:03:28.200
<00:03:27.800>first <00:03:27.980>of <00:03:28.160>all

67
00:03:29.100 --> 00:03:30.400
<00:03:29.100>custom <00:03:30.270>elements

68
00:03:32.200 --> 00:03:32.800
templates

69
00:03:34.200 --> 00:03:35.500
<00:03:34.200>and <00:03:34.590>the <00:03:34.980>shadow <00:03:35.370>Dom

70
00:03:36.300 --> 00:03:39.200
<00:03:36.300>and <00:03:36.475>it's <00:03:36.650>no <00:03:36.825>coincidence. <00:03:37.000>I'm <00:03:37.175>wearing <00:03:37.350>this <00:03:37.525>t-shirt, <00:03:37.700>of

71
00:03:39.200 --> 00:03:42.600
<00:03:39.200>course <00:03:39.339>because <00:03:39.480>this <00:03:39.619>is <00:03:39.760>the <00:03:39.899>shadow <00:03:40.040>formula. <00:03:40.179>What <00:03:40.320>team <00:03:40.459>in <00:03:40.600>the

72
00:03:42.600 --> 00:03:42.900
70s.

73
00:03:43.900 --> 00:03:45.800
<00:03:43.900>Dress <00:03:44.250>to <00:03:44.600>the <00:03:44.950>occasion, <00:03:45.300>right?

74
00:03:47.400 --> 00:03:47.700
so

75
00:03:48.400 --> 00:03:51.300
<00:03:48.400>web <00:03:48.633>components <00:03:48.866>are <00:03:49.100>not <00:03:49.333>completely <00:03:49.566>new <00:03:49.800>thing

76
00:03:51.300 --> 00:03:54.900
<00:03:51.300>already <00:03:51.533>in <00:03:51.766>2011 <00:03:52.000>at <00:03:52.233>my <00:03:52.466>beloved <00:03:52.700>Frontiers

77
00:03:54.900 --> 00:03:57.300
<00:03:54.900>conference <00:03:55.180>in <00:03:55.460>Amsterdam. <00:03:55.740>Alex <00:03:56.020>Russell <00:03:56.300>was

78
00:03:57.300 --> 00:03:58.900
<00:03:57.300>always <00:03:57.650>already <00:03:58.000>talking <00:03:58.350>about <00:03:58.700>it.

79
00:04:02.300 --> 00:04:04.400
<00:04:02.300>Let's <00:04:02.475>see <00:04:02.650>what <00:04:02.825>we're <00:04:03.000>going <00:04:03.175>to <00:04:03.350>do <00:04:03.525>this <00:04:03.700>morning.

80
00:04:05.100 --> 00:04:06.100
<00:04:05.100>I <00:04:05.280>show <00:04:05.460>a <00:04:05.640>lot <00:04:05.820>of <00:04:06.000>code.

81
00:04:06.700 --> 00:04:10.000
<00:04:06.700>Don't <00:04:06.855>worry. <00:04:07.011>You <00:04:07.166>can <00:04:07.322>review <00:04:07.477>it <00:04:07.633>later <00:04:07.788>on <00:04:07.944>on <00:04:08.100>GitHub

82
00:04:09.200 --> 00:04:12.100
<00:04:09.200>and <00:04:09.355>the <00:04:09.511>slides <00:04:09.666>will <00:04:09.822>be <00:04:09.977>available <00:04:10.133>as <00:04:10.288>well. <00:04:10.444>Of <00:04:10.600>course,

83
00:04:12.100 --> 00:04:15.500
<00:04:12.100>so <00:04:12.255>we're <00:04:12.411>going <00:04:12.566>to <00:04:12.722>look <00:04:12.877>at <00:04:13.033>custom <00:04:13.188>elements <00:04:13.344>templates <00:04:13.500>and

84
00:04:15.500 --> 00:04:18.300
<00:04:15.500>Shadow <00:04:15.655>Dom. <00:04:15.811>We're <00:04:15.966>going <00:04:16.122>to <00:04:16.277>look <00:04:16.433>at <00:04:16.588>properties <00:04:16.744>in <00:04:16.899>attributes.

85
00:04:19.300 --> 00:04:20.500
<00:04:19.300>lifecycle <00:04:20.380>events

86
00:04:21.700 --> 00:04:22.900
<00:04:21.700>default <00:04:21.969>slots <00:04:22.240>and <00:04:22.510>name <00:04:22.780>slots

87
00:04:23.700 --> 00:04:25.700
<00:04:23.700>how <00:04:23.933>to <00:04:24.166>dispatch <00:04:24.400>event <00:04:24.633>from <00:04:24.866>your <00:04:25.099>component

88
00:04:26.500 --> 00:04:30.000
<00:04:26.500>and <00:04:26.675>how <00:04:26.850>to <00:04:27.025>integrate <00:04:27.200>it <00:04:27.375>with <00:04:27.550>the <00:04:27.725>Beloved <00:04:27.900>JavaScript

89
00:04:29.000 --> 00:04:30.500
Frameworks

90
00:04:31.900 --> 00:04:34.200
<00:04:31.900>so <00:04:32.133>first <00:04:32.366>of <00:04:32.599>all <00:04:32.833>our <00:04:33.066>custom <00:04:33.299>element

91
00:04:36.500 --> 00:04:39.800
<00:04:36.500>with <00:04:36.655>a <00:04:36.811>custom <00:04:36.966>element <00:04:37.122>you <00:04:37.277>define <00:04:37.433>your <00:04:37.588>own <00:04:37.744>HDMI <00:04:37.900>HTML

92
00:04:39.800 --> 00:04:42.700
<00:04:39.800>element <00:04:40.000>and <00:04:40.200>you <00:04:40.400>can <00:04:40.600>give <00:04:40.800>it <00:04:41.000>some <00:04:41.200>Behavior.

93
00:04:44.400 --> 00:04:47.200
<00:04:44.400>Or <00:04:44.599>another <00:04:44.799>way <00:04:45.000>is <00:04:45.200>you <00:04:45.400>take <00:04:45.599>a <00:04:45.799>native

94
00:04:47.200 --> 00:04:47.400
element.

95
00:04:48.400 --> 00:04:49.700
<00:04:48.400>And <00:04:48.594>you <00:04:48.789>change <00:04:48.984>it <00:04:49.180>a <00:04:49.375>little <00:04:49.570>bit.

96
00:04:50.500 --> 00:04:53.400
<00:04:50.500>And <00:04:50.640>maybe <00:04:50.780>give <00:04:50.920>it <00:04:51.060>a <00:04:51.200>little <00:04:51.340>bit <00:04:51.480>of <00:04:51.620>different <00:04:51.760>Behavior <00:04:51.900>as

97
00:04:53.400 --> 00:04:53.400
well.

98
00:04:55.400 --> 00:04:58.700
<00:04:55.400>The <00:04:55.527>first <00:04:55.654>one <00:04:55.781>when <00:04:55.909>you <00:04:56.036>define <00:04:56.163>your <00:04:56.290>own <00:04:56.418>HTML <00:04:56.545>elements, <00:04:56.672>it's <00:04:56.799>called

99
00:04:58.700 --> 00:05:01.200
<00:04:58.700>an <00:04:58.979>autonomous <00:04:59.260>custom <00:04:59.539>event <00:04:59.820>a <00:05:00.099>custom

100
00:05:01.200 --> 00:05:01.700
<00:05:01.200>elements. <00:05:01.650>Sorry.

101
00:05:03.100 --> 00:05:04.100
<00:05:03.100>So, <00:05:03.325>how <00:05:03.550>does <00:05:03.775>that <00:05:04.000>work?

102
00:05:05.200 --> 00:05:07.100
<00:05:05.200>You <00:05:05.479>can <00:05:05.760>see <00:05:06.039>some <00:05:06.320>HTML <00:05:06.599>here.

103
00:05:07.800 --> 00:05:10.200
<00:05:07.800>And <00:05:08.080>I <00:05:08.360>already <00:05:08.640>included <00:05:08.920>a <00:05:09.200>link

104
00:05:10.200 --> 00:05:10.800
<00:05:10.200>to <00:05:10.470>a <00:05:10.740>script.

105
00:05:11.800 --> 00:05:13.100
<00:05:11.800>so <00:05:12.092>if <00:05:12.385>I'm <00:05:12.677>going <00:05:12.970>to

106
00:05:14.500 --> 00:05:17.000
<00:05:14.500>View <00:05:14.655>this <00:05:14.811>in <00:05:14.966>live <00:05:15.122>preview. <00:05:15.277>You <00:05:15.433>can <00:05:15.588>see <00:05:15.744>this <00:05:15.900>is

107
00:05:17.200 --> 00:05:19.300
<00:05:17.200>the <00:05:17.433>paragraph <00:05:17.666>that's <00:05:17.900>all <00:05:18.133>already <00:05:18.366>in <00:05:18.599>HTML.

108
00:05:20.500 --> 00:05:22.800
<00:05:20.500>But <00:05:20.675>now <00:05:20.850>I'm <00:05:21.025>going <00:05:21.200>to <00:05:21.375>add <00:05:21.550>a <00:05:21.725>custom <00:05:21.900>element.

109
00:05:23.900 --> 00:05:26.100
<00:05:23.900>So <00:05:24.099>we <00:05:24.299>are <00:05:24.500>using <00:05:24.700>the <00:05:24.900>class <00:05:25.099>syntax <00:05:25.299>there.

110
00:05:27.300 --> 00:05:28.600
<00:05:27.300>And <00:05:27.690>we <00:05:28.080>are <00:05:28.470>extending.

111
00:05:29.800 --> 00:05:31.000
<00:05:29.800>the <00:05:30.340>HTML <00:05:30.880>elements

112
00:05:32.200 --> 00:05:35.200
<00:05:32.200>that <00:05:32.340>is <00:05:32.479>the <00:05:32.620>base <00:05:32.760>element <00:05:32.900>that <00:05:33.039>we <00:05:33.180>are <00:05:33.320>using <00:05:33.460>because <00:05:33.599>we

113
00:05:35.200 --> 00:05:38.400
<00:05:35.200>are <00:05:35.400>extending <00:05:35.599>it <00:05:35.800>in <00:05:36.000>the <00:05:36.200>Constructor. <00:05:36.400>We <00:05:36.599>also

114
00:05:38.400 --> 00:05:39.400
<00:05:38.400>need <00:05:38.625>to <00:05:38.849>call <00:05:39.075>the <00:05:39.299>super.

115
00:05:41.200 --> 00:05:42.500
<00:05:41.200>Yeah, <00:05:41.433>I'm <00:05:41.668>not <00:05:41.902>typing <00:05:42.136>right <00:05:42.370>away.

116
00:05:46.500 --> 00:05:49.100
<00:05:46.500>and <00:05:46.675>then <00:05:46.850>we <00:05:47.025>can <00:05:47.200>set <00:05:47.375>the <00:05:47.550>inner <00:05:47.725>HTML <00:05:47.900>of

117
00:05:49.100 --> 00:05:51.800
<00:05:49.100>our <00:05:49.300>element <00:05:49.500>for <00:05:49.700>instance <00:05:49.900>to <00:05:50.100>this <00:05:50.300>quote <00:05:50.500>from

118
00:05:53.100 --> 00:05:53.300
our

119
00:05:54.300 --> 00:05:55.800
<00:05:54.300>Dutch <00:05:54.975>guy <00:05:55.650>Max

120
00:05:58.200 --> 00:06:02.200
<00:05:58.200>Now <00:05:58.293>we <00:05:58.386>may <00:05:58.479>have <00:05:58.573>to <00:05:58.666>make <00:05:58.760>sure <00:05:58.853>HTML <00:05:58.946>can <00:05:59.039>use <00:05:59.133>it <00:05:59.226>so <00:05:59.320>we <00:05:59.413>will <00:05:59.506>Define <00:05:59.599>this

121
00:06:01.200 --> 00:06:02.600
<00:06:01.200>custom <00:06:02.460>element.

122
00:06:03.400 --> 00:06:04.200
<00:06:03.400>Give <00:06:03.640>it <00:06:03.880>a <00:06:04.120>name.

123
00:06:06.200 --> 00:06:08.800
<00:06:06.200>And <00:06:06.479>attached <00:06:06.760>the <00:06:07.039>class <00:06:07.320>to <00:06:07.599>it.

124
00:06:10.500 --> 00:06:11.900
<00:06:10.500>But <00:06:10.752>still <00:06:11.004>nothing <00:06:11.256>happens, <00:06:11.508>of <00:06:11.760>course.

125
00:06:14.200 --> 00:06:15.200
<00:06:14.200>We <00:06:14.425>go <00:06:14.650>to <00:06:14.875>the <00:06:15.099>HTML.

126
00:06:16.300 --> 00:06:18.300
<00:06:16.300>And <00:06:16.475>below <00:06:16.650>this <00:06:16.825>paragraph <00:06:17.000>we're <00:06:17.175>going <00:06:17.350>to <00:06:17.525>include <00:06:17.700>it.

127
00:06:20.800 --> 00:06:21.700
<00:06:20.800>And <00:06:21.002>not <00:06:21.205>a <00:06:21.407>magic <00:06:21.610>happens.

128
00:06:23.200 --> 00:06:25.900
<00:06:23.200>Three <00:06:23.433>two <00:06:23.666>one. <00:06:23.900>Whoa, <00:06:24.133>there <00:06:24.366>it <00:06:24.599>is.

129
00:06:26.800 --> 00:06:29.700
<00:06:26.800>Is <00:06:26.975>that <00:06:27.150>simple? <00:06:27.325>I'm <00:06:27.500>not <00:06:27.675>saying <00:06:27.850>it's <00:06:28.025>easy, <00:06:28.200>but

130
00:06:29.700 --> 00:06:30.900
<00:06:29.700>it's <00:06:30.060>simple <00:06:30.419>to <00:06:30.780>do.

131
00:06:33.400 --> 00:06:36.300
<00:06:33.400>So <00:06:33.539>just <00:06:33.679>a <00:06:33.820>little <00:06:33.960>recap <00:06:34.099>to <00:06:34.239>get <00:06:34.380>you <00:06:34.520>on <00:06:34.659>the <00:06:34.799>Baseline.

132
00:06:37.400 --> 00:06:37.800
<00:06:37.400>we <00:06:37.760>have

133
00:06:38.800 --> 00:06:41.500
<00:06:38.800>an <00:06:39.080>es6 <00:06:39.360>class <00:06:39.640>definition <00:06:39.920>which <00:06:40.200>works

134
00:06:41.500 --> 00:06:44.000
<00:06:41.500>in <00:06:41.780>modern <00:06:42.060>browsers <00:06:42.340>by <00:06:42.620>by <00:06:42.900>ie

135
00:06:45.300 --> 00:06:48.400
<00:06:45.300>We <00:06:45.416>extend <00:06:45.533>it. <00:06:45.650>So <00:06:45.766>we <00:06:45.883>have <00:06:46.000>to <00:06:46.116>call <00:06:46.233>this <00:06:46.350>the <00:06:46.466>super <00:06:46.583>of <00:06:46.700>in

136
00:06:48.400 --> 00:06:49.000
<00:06:48.400>the <00:06:48.940>Constructor.

137
00:06:50.100 --> 00:06:53.200
<00:06:50.100>In <00:06:50.216>this <00:06:50.333>case, <00:06:50.450>we <00:06:50.566>set <00:06:50.683>inner <00:06:50.800>HTML <00:06:50.916>and <00:06:51.033>we <00:06:51.150>make <00:06:51.266>sure <00:06:51.383>that <00:06:51.500>we

138
00:06:53.200 --> 00:06:56.200
<00:06:53.200>register <00:06:53.375>the <00:06:53.550>components. <00:06:53.724>So <00:06:53.900>it <00:06:54.075>it's <00:06:54.250>available <00:06:54.425>in <00:06:54.599>the

139
00:06:56.200 --> 00:06:56.700
Dom.

140
00:06:58.200 --> 00:07:01.800
<00:06:58.200>And <00:06:58.355>in <00:06:58.511>the <00:06:58.666>HTML, <00:06:58.822>we <00:06:58.977>insert <00:06:59.133>the <00:06:59.288>tag <00:06:59.444>note <00:06:59.599>that

141
00:07:01.800 --> 00:07:04.200
<00:07:01.800>a <00:07:02.000>dash <00:07:02.200>is <00:07:02.400>required <00:07:02.600>because <00:07:02.800>otherwise <00:07:03.000>you <00:07:03.200>might

142
00:07:04.200 --> 00:07:07.800
<00:07:04.200>collide <00:07:04.550>with <00:07:04.900>existing <00:07:05.250>HTML <00:07:05.599>elements

143
00:07:07.800 --> 00:07:10.100
<00:07:07.800>or <00:07:08.266>future <00:07:08.733>HTML <00:07:09.200>elements.

144
00:07:10.800 --> 00:07:13.200
<00:07:10.800>So <00:07:11.033>maybe <00:07:11.266>use <00:07:11.500>a <00:07:11.733>prefix <00:07:11.966>of <00:07:12.200>your

145
00:07:13.200 --> 00:07:14.000
<00:07:13.200>company <00:07:13.560>or <00:07:13.920>whatever.

146
00:07:15.900 --> 00:07:18.200
<00:07:15.900>And <00:07:16.055>of <00:07:16.211>course <00:07:16.366>you <00:07:16.522>need <00:07:16.677>to <00:07:16.833>include <00:07:16.988>the <00:07:17.144>JavaScript <00:07:17.299>that

147
00:07:18.200 --> 00:07:18.800
<00:07:18.200>you're <00:07:18.470>referring <00:07:18.740>to.

148
00:07:20.600 --> 00:07:24.200
<00:07:20.600>Another <00:07:20.800>way <00:07:21.000>is <00:07:21.200>to <00:07:21.400>customize <00:07:21.600>a <00:07:21.800>customized <00:07:22.000>native

149
00:07:24.200 --> 00:07:24.400
element.

150
00:07:25.300 --> 00:07:28.500
<00:07:25.300>So <00:07:25.416>in <00:07:25.533>this <00:07:25.650>case, <00:07:25.766>I <00:07:25.883>have <00:07:26.000>a <00:07:26.116>list <00:07:26.233>of <00:07:26.350>links <00:07:26.466>to <00:07:26.583>Formula <00:07:26.700>One

151
00:07:28.500 --> 00:07:28.900
websites.

152
00:07:29.700 --> 00:07:32.300
<00:07:29.700>But <00:07:29.840>I <00:07:29.979>want <00:07:30.120>to <00:07:30.260>make <00:07:30.400>sure <00:07:30.539>that <00:07:30.680>if <00:07:30.820>a <00:07:30.960>user <00:07:31.099>clicks

153
00:07:32.300 --> 00:07:35.600
<00:07:32.300>on <00:07:32.440>that <00:07:32.580>link <00:07:32.720>they <00:07:32.860>get <00:07:33.000>a <00:07:33.140>message <00:07:33.280>saying <00:07:33.420>well, <00:07:33.560>you're <00:07:33.700>leaving

154
00:07:35.600 --> 00:07:37.500
<00:07:35.600>our <00:07:35.740>website. <00:07:35.880>Are <00:07:36.020>you <00:07:36.160>really <00:07:36.300>sure <00:07:36.440>you <00:07:36.580>want <00:07:36.720>to <00:07:36.860>do <00:07:37.000>that?

155
00:07:39.300 --> 00:07:42.700
<00:07:39.300>So <00:07:39.440>if <00:07:39.580>I <00:07:39.720>take <00:07:39.860>this <00:07:40.000>in <00:07:40.140>a <00:07:40.280>live <00:07:40.420>preview, <00:07:40.560>it <00:07:40.700>doesn't

156
00:07:42.700 --> 00:07:45.700
<00:07:42.700>work. <00:07:42.900>Unfortunately <00:07:43.099>in <00:07:43.300>vs <00:07:43.500>code, <00:07:43.700>so <00:07:43.900>I'm <00:07:44.099>hoping

157
00:07:45.700 --> 00:07:47.100
<00:07:45.700>in <00:07:46.120>a <00:07:46.540>new <00:07:46.960>browser.

158
00:07:48.400 --> 00:07:51.500
<00:07:48.400>Sometimes <00:07:48.555>you <00:07:48.711>can <00:07:48.866>use <00:07:49.022>directly <00:07:49.177>browser <00:07:49.333>in <00:07:49.488>this <00:07:49.644>in <00:07:49.799>this

159
00:07:51.500 --> 00:07:54.200
<00:07:51.500>case. <00:07:51.655>You <00:07:51.811>can't <00:07:51.966>so <00:07:52.122>here <00:07:52.277>we <00:07:52.433>have <00:07:52.588>the <00:07:52.744>link <00:07:52.900>to

160
00:07:55.500 --> 00:07:56.200
<00:07:55.500>the <00:07:55.815>website <00:07:56.130>of

161
00:07:57.200 --> 00:08:00.200
<00:07:57.200>Rebel <00:07:57.550>after <00:07:57.900>the <00:07:58.250>Monaco <00:07:58.599>Grand

162
00:08:00.200 --> 00:08:04.000
<00:08:00.200>Prix, <00:08:00.375>but <00:08:00.550>it <00:08:00.724>opens <00:08:00.900>in <00:08:01.075>the <00:08:01.250>same <00:08:01.425>browser <00:08:01.599>window

163
00:08:03.300 --> 00:08:06.400
<00:08:03.300>and <00:08:03.455>I <00:08:03.611>don't <00:08:03.766>want <00:08:03.922>it. <00:08:04.077>So <00:08:04.233>I <00:08:04.388>have <00:08:04.544>some <00:08:04.700>code

164
00:08:06.400 --> 00:08:09.600
<00:08:06.400>here <00:08:06.633>saying <00:08:06.866>well <00:08:07.099>we're <00:08:07.333>gonna <00:08:07.566>extend <00:08:07.799>now

165
00:08:09.600 --> 00:08:12.300
<00:08:09.600>the <00:08:09.800>anchor <00:08:10.000>element <00:08:10.200>so <00:08:10.400>not <00:08:10.600>the <00:08:10.800>base <00:08:11.000>element

166
00:08:12.300 --> 00:08:13.900
<00:08:12.300>but <00:08:13.000>specific <00:08:13.700>elements.

167
00:08:15.200 --> 00:08:18.300
<00:08:15.200>And <00:08:15.327>we <00:08:15.454>add <00:08:15.581>an <00:08:15.709>event <00:08:15.836>listener <00:08:15.963>when <00:08:16.090>it's <00:08:16.218>clicked <00:08:16.345>and <00:08:16.472>when <00:08:16.599>it's

168
00:08:18.300 --> 00:08:18.600
clicked.

169
00:08:19.400 --> 00:08:22.600
<00:08:19.400>We <00:08:19.555>are <00:08:19.711>going <00:08:19.866>to <00:08:20.022>show <00:08:20.177>a <00:08:20.333>confirmed <00:08:20.488>dialog <00:08:20.644>whether <00:08:20.799>people

170
00:08:22.600 --> 00:08:25.200
<00:08:22.600>want <00:08:22.775>to <00:08:22.950>move <00:08:23.125>away <00:08:23.300>from <00:08:23.475>the <00:08:23.650>website <00:08:23.825>or <00:08:24.000>not.

171
00:08:26.600 --> 00:08:28.000
<00:08:26.600>and <00:08:27.020>because <00:08:27.440>we're <00:08:27.860>extending

172
00:08:29.300 --> 00:08:32.200
<00:08:29.300>HTML <00:08:29.455>anchor <00:08:29.611>elements <00:08:29.766>we <00:08:29.922>need <00:08:30.077>to <00:08:30.233>make <00:08:30.388>sure <00:08:30.544>that <00:08:30.700>we

173
00:08:32.200 --> 00:08:32.700
also

174
00:08:34.200 --> 00:08:37.500
<00:08:34.200>set <00:08:34.327>the <00:08:34.454>options <00:08:34.581>which <00:08:34.709>one <00:08:34.836>we <00:08:34.963>are <00:08:35.090>going <00:08:35.218>to <00:08:35.345>extend. <00:08:35.472>So <00:08:35.600>we

175
00:08:37.500 --> 00:08:39.600
<00:08:37.500>are <00:08:37.733>setting <00:08:37.966>extends <00:08:38.200>to <00:08:38.433>a <00:08:38.666>the <00:08:38.900>link.

176
00:08:40.900 --> 00:08:43.100
<00:08:40.900>And <00:08:41.100>now <00:08:41.299>very <00:08:41.500>easy <00:08:41.699>in <00:08:41.900>HTML <00:08:42.100>we <00:08:42.299>can

177
00:08:43.100 --> 00:08:47.100
<00:08:43.100>say <00:08:43.275>on <00:08:43.450>this <00:08:43.625>link <00:08:43.800>we <00:08:43.975>add <00:08:44.150>an <00:08:44.325>is <00:08:44.500>attribute.

178
00:08:47.700 --> 00:08:50.400
<00:08:47.700>And <00:08:47.855>we're <00:08:48.011>saying <00:08:48.166>this <00:08:48.322>is <00:08:48.477>an <00:08:48.633>external <00:08:48.788>link <00:08:48.944>and <00:08:49.100>now

179
00:08:50.400 --> 00:08:53.300
<00:08:50.400>it <00:08:50.574>will <00:08:50.750>use <00:08:50.925>my <00:08:51.100>component. <00:08:51.275>So <00:08:51.449>if <00:08:51.625>you <00:08:51.800>click

180
00:08:53.300 --> 00:08:56.300
<00:08:53.300>on <00:08:53.439>this <00:08:53.579>now, <00:08:53.719>you <00:08:53.859>can <00:08:54.000>see <00:08:54.140>you <00:08:54.280>get <00:08:54.420>a <00:08:54.560>dialogue <00:08:54.699>saying

181
00:08:56.300 --> 00:08:58.200
<00:08:56.300>well, <00:08:56.474>do <00:08:56.650>you <00:08:56.824>really <00:08:57.000>want <00:08:57.175>to <00:08:57.349>leave <00:08:57.525>our <00:08:57.699>website?

182
00:08:59.100 --> 00:09:00.500
<00:08:59.100>So <00:08:59.310>there's <00:08:59.520>two <00:08:59.730>ways <00:08:59.940>of <00:09:00.150>doing <00:09:00.360>things.

183
00:09:02.500 --> 00:09:03.800
<00:09:02.500>Also <00:09:02.734>a <00:09:02.968>little <00:09:03.202>recap <00:09:03.435>of <00:09:03.670>this.

184
00:09:04.800 --> 00:09:07.900
<00:09:04.800>So <00:09:05.033>you <00:09:05.266>extend <00:09:05.500>a <00:09:05.733>specific <00:09:05.966>HTML <00:09:06.199>element?

185
00:09:09.100 --> 00:09:11.700
<00:09:09.100>And <00:09:09.255>you <00:09:09.411>registered <00:09:09.566>the <00:09:09.722>extent <00:09:09.877>to <00:09:10.033>the <00:09:10.188>Dom <00:09:10.344>as <00:09:10.500>well?

186
00:09:12.700 --> 00:09:16.000
<00:09:12.700>And <00:09:12.855>here <00:09:13.011>in <00:09:13.166>the <00:09:13.322>HTML <00:09:13.477>you <00:09:13.633>add <00:09:13.788>the <00:09:13.944>is <00:09:14.100>attribute

187
00:09:15.500 --> 00:09:18.700
<00:09:15.500>with <00:09:15.700>the <00:09:15.900>tech <00:09:16.100>name <00:09:16.300>of <00:09:16.500>your <00:09:16.700>own <00:09:16.900>element.

188
00:09:20.100 --> 00:09:20.600
however

189
00:09:21.700 --> 00:09:24.100
<00:09:21.700>This <00:09:21.900>is <00:09:22.100>not <00:09:22.300>supported <00:09:22.500>in <00:09:22.700>webkit <00:09:22.900>browser. <00:09:23.100>So.

190
00:09:24.800 --> 00:09:28.200
<00:09:24.800>Safari <00:09:25.079>and <00:09:25.359>all <00:09:25.640>the <00:09:25.920>Exotic <00:09:26.199>ones

191
00:09:28.200 --> 00:09:29.200
<00:09:28.200>that <00:09:28.425>are <00:09:28.650>based <00:09:28.875>on <00:09:29.100>webkit

192
00:09:30.100 --> 00:09:34.000
<00:09:30.100>Aren't <00:09:30.255>aren't <00:09:30.411>you <00:09:30.566>allowing <00:09:30.722>you <00:09:30.877>to <00:09:31.033>do <00:09:31.188>this. <00:09:31.344>Just <00:09:31.500>ignore

193
00:09:33.000 --> 00:09:34.100
it.

194
00:09:35.100 --> 00:09:38.000
<00:09:35.100>But <00:09:35.227>unfortunately, <00:09:35.354>there's <00:09:35.481>a <00:09:35.609>polyfill <00:09:35.736>for <00:09:35.863>that <00:09:35.990>if <00:09:36.118>you <00:09:36.245>really <00:09:36.372>want <00:09:36.500>to

195
00:09:38.200 --> 00:09:38.400
<00:09:38.200>do <00:09:38.380>that.

196
00:09:40.100 --> 00:09:43.900
<00:09:40.100>All <00:09:40.240>right. <00:09:40.380>Let's <00:09:40.520>talk <00:09:40.660>about <00:09:40.800>templates. <00:09:40.940>Templates <00:09:41.080>are <00:09:41.220>very <00:09:41.360>common <00:09:41.500>in

197
00:09:43.900 --> 00:09:46.500
<00:09:43.900>view <00:09:44.100>angular <00:09:44.300>or <00:09:44.500>whatever <00:09:44.699>as <00:09:44.900>well. <00:09:45.100>So <00:09:45.300>I

198
00:09:46.500 --> 00:09:49.400
<00:09:46.500>don't <00:09:46.640>really <00:09:46.780>have <00:09:46.920>a <00:09:47.060>lot <00:09:47.200>to <00:09:47.340>say <00:09:47.480>about <00:09:47.620>it <00:09:47.760>except <00:09:47.900>that

199
00:09:49.400 --> 00:09:49.500
we

200
00:09:50.500 --> 00:09:52.600
<00:09:50.500>Create <00:09:50.733>a <00:09:50.966>template <00:09:51.200>outside <00:09:51.433>of <00:09:51.666>our <00:09:51.900>class.

201
00:09:53.600 --> 00:09:56.500
<00:09:53.600>And <00:09:53.833>then <00:09:54.066>we <00:09:54.300>append <00:09:54.533>it <00:09:54.766>to <00:09:55.000>our

202
00:09:56.500 --> 00:09:57.300
<00:09:56.500>component <00:09:56.860>this <00:09:57.219>way.

203
00:09:59.400 --> 00:09:59.900
<00:09:59.400>That's <00:09:59.850>it.

204
00:10:01.500 --> 00:10:04.300
<00:10:01.500>Styling <00:10:01.675>is <00:10:01.850>always <00:10:02.025>hard <00:10:02.200>if <00:10:02.375>you <00:10:02.550>working <00:10:02.725>with <00:10:02.900>components.

205
00:10:05.800 --> 00:10:08.400
<00:10:05.800>Let's <00:10:05.955>see <00:10:06.111>what <00:10:06.266>happens <00:10:06.422>if <00:10:06.577>we're <00:10:06.733>going <00:10:06.888>to <00:10:07.044>style <00:10:07.199>for

206
00:10:08.400 --> 00:10:11.600
<00:10:08.400>instance <00:10:08.600>all <00:10:08.800>the <00:10:09.000>paragraphs <00:10:09.199>in <00:10:09.400>our <00:10:09.600>index <00:10:09.800>HTML.

207
00:10:12.400 --> 00:10:13.300
<00:10:12.400>So <00:10:12.670>we're <00:10:12.939>adding <00:10:13.209>here.

208
00:10:14.500 --> 00:10:17.400
<00:10:14.500>Styling <00:10:14.675>for <00:10:14.850>the <00:10:15.025>PTEC <00:10:15.200>and <00:10:15.375>let's <00:10:15.550>say <00:10:15.725>make <00:10:15.900>the

209
00:10:17.400 --> 00:10:18.200
<00:10:17.400>color <00:10:18.120>green.

210
00:10:20.400 --> 00:10:23.900
<00:10:20.400>Oops. <00:10:20.540>Now <00:10:20.680>also <00:10:20.819>the <00:10:20.959>one <00:10:21.100>from <00:10:21.240>our <00:10:21.380>custom <00:10:21.520>element <00:10:21.660>is <00:10:21.800>green

211
00:10:23.900 --> 00:10:26.400
<00:10:23.900>and <00:10:24.100>we <00:10:24.300>want <00:10:24.500>to <00:10:24.699>have <00:10:24.900>that <00:10:25.100>for <00:10:25.300>instance

212
00:10:26.400 --> 00:10:29.300
<00:10:26.400>blue. <00:10:26.633>So <00:10:26.866>no <00:10:27.100>worries. <00:10:27.333>We <00:10:27.566>just <00:10:27.800>add

213
00:10:29.300 --> 00:10:30.300
<00:10:29.300>some <00:10:29.525>style <00:10:29.750>here <00:10:29.974>as <00:10:30.199>well.

214
00:10:33.500 --> 00:10:34.100
<00:10:33.500>Let's <00:10:33.680>say <00:10:33.860>color <00:10:34.040>blue.

215
00:10:37.700 --> 00:10:38.900
<00:10:37.700>But <00:10:37.970>now <00:10:38.240>everything <00:10:38.510>is <00:10:38.780>blue.

216
00:10:39.900 --> 00:10:40.200
s***

217
00:10:41.200 --> 00:10:44.200
<00:10:41.200>Let's <00:10:41.316>go <00:10:41.433>back <00:10:41.550>to <00:10:41.666>the <00:10:41.783>index <00:10:41.900>HTML. <00:10:42.016>Maybe <00:10:42.133>we <00:10:42.250>can <00:10:42.366>do <00:10:42.483>something <00:10:42.600>with

218
00:10:44.200 --> 00:10:47.400
<00:10:44.200>important <00:10:44.400>there <00:10:44.600>that <00:10:44.800>it's <00:10:45.000>only <00:10:45.200>using <00:10:45.400>the <00:10:45.600>one

219
00:10:47.400 --> 00:10:50.100
<00:10:47.400>from <00:10:47.680>the <00:10:47.959>HTML. <00:10:48.240>No, <00:10:48.520>it <00:10:48.800>overrides.

220
00:10:51.200 --> 00:10:52.100
<00:10:51.200>the <00:10:51.470>component <00:10:51.740>as <00:10:52.010>well

221
00:10:53.500 --> 00:10:56.600
<00:10:53.500>That's <00:10:53.655>tricky. <00:10:53.811>I've <00:10:53.966>been <00:10:54.122>in <00:10:54.277>this <00:10:54.433>situation <00:10:54.588>with <00:10:54.744>view <00:10:54.900>many

222
00:10:56.600 --> 00:10:57.900
<00:10:56.600>many <00:10:57.770>times.

223
00:10:59.600 --> 00:11:02.400
<00:10:59.600>But <00:10:59.775>Hallelujah <00:10:59.950>we <00:11:00.125>have <00:11:00.300>shadowed <00:11:00.475>on <00:11:00.650>in <00:11:00.825>web <00:11:01.000>components.

224
00:11:03.400 --> 00:11:06.400
<00:11:03.400>And <00:11:03.555>Shadow <00:11:03.711>them <00:11:03.866>does <00:11:04.022>a <00:11:04.177>lot <00:11:04.333>of <00:11:04.488>things <00:11:04.644>but <00:11:04.800>it

225
00:11:06.400 --> 00:11:09.800
<00:11:06.400>also <00:11:06.600>most <00:11:06.800>importantly <00:11:07.000>for <00:11:07.199>me <00:11:07.400>it <00:11:07.600>encapsulates <00:11:07.800>the

226
00:11:09.800 --> 00:11:12.300
<00:11:09.800>CSS. <00:11:10.079>So <00:11:10.359>nothing <00:11:10.640>will <00:11:10.920>leak <00:11:11.199>in

227
00:11:12.300 --> 00:11:13.400
<00:11:12.300>or <00:11:12.795>leak <00:11:13.290>out.

228
00:11:14.200 --> 00:11:17.600
<00:11:14.200>And <00:11:14.307>that's <00:11:14.415>what <00:11:14.523>we <00:11:14.630>want. <00:11:14.738>Right? <00:11:14.846>So, <00:11:14.953>let's <00:11:15.061>see <00:11:15.169>how <00:11:15.276>that <00:11:15.384>works. <00:11:15.492>We <00:11:15.600>have

229
00:11:17.600 --> 00:11:20.000
<00:11:17.600>the <00:11:17.740>same <00:11:17.880>code <00:11:18.020>and <00:11:18.160>we <00:11:18.300>go <00:11:18.440>to <00:11:18.580>our <00:11:18.720>Javascript <00:11:18.860>file <00:11:19.000>again.

230
00:11:21.400 --> 00:11:25.000
<00:11:21.400>But <00:11:21.680>instead <00:11:21.959>of <00:11:22.240>doing <00:11:22.520>appending <00:11:22.800>this

231
00:11:24.100 --> 00:11:25.600
<00:11:24.100>child <00:11:24.775>we <00:11:25.450>first.

232
00:11:26.200 --> 00:11:27.700
<00:11:26.200>attach <00:11:26.875>a <00:11:27.550>shadow

233
00:11:28.700 --> 00:11:31.200
<00:11:28.700>and <00:11:28.933>you <00:11:29.166>have <00:11:29.400>to <00:11:29.633>specify <00:11:29.866>a <00:11:30.100>mode

234
00:11:31.200 --> 00:11:34.400
<00:11:31.200>and <00:11:31.355>we're <00:11:31.511>using <00:11:31.666>open <00:11:31.822>you <00:11:31.977>can <00:11:32.133>also <00:11:32.288>use <00:11:32.444>enclosed <00:11:32.600>but

235
00:11:34.400 --> 00:11:37.100
<00:11:34.400>that's <00:11:34.633>trying <00:11:34.866>to <00:11:35.100>limit <00:11:35.333>access <00:11:35.566>from <00:11:35.800>the

236
00:11:37.100 --> 00:11:40.700
<00:11:37.100>outside, <00:11:37.275>but <00:11:37.450>it's <00:11:37.625>really <00:11:37.800>doesn't <00:11:37.975>have <00:11:38.150>a <00:11:38.325>real <00:11:38.500>purpose.

237
00:11:41.400 --> 00:11:44.700
<00:11:41.400>And <00:11:41.527>then <00:11:41.654>instead <00:11:41.781>of <00:11:41.909>this <00:11:42.036>event <00:11:42.163>child <00:11:42.290>we <00:11:42.418>say <00:11:42.545>this <00:11:42.672>Shadow <00:11:42.800>root

238
00:11:44.700 --> 00:11:45.400
<00:11:44.700>dot <00:11:45.015>append <00:11:45.329>child.

239
00:11:45.800 --> 00:11:48.400
<00:11:45.800>And <00:11:46.000>now <00:11:46.199>magically <00:11:46.400>you <00:11:46.599>can <00:11:46.800>see <00:11:47.000>the <00:11:47.199>color

240
00:11:48.400 --> 00:11:48.800
<00:11:48.400>is <00:11:48.760>blue.

241
00:11:49.700 --> 00:11:52.400
<00:11:49.700>Because <00:11:49.933>these <00:11:50.166>styles <00:11:50.400>are <00:11:50.633>only <00:11:50.866>applied <00:11:51.100>to

242
00:11:52.400 --> 00:11:54.200
<00:11:52.400>our <00:11:53.100>custom <00:11:53.800>elements.

243
00:11:54.900 --> 00:11:57.200
<00:11:54.900>And <00:11:55.055>it <00:11:55.211>separated <00:11:55.366>from <00:11:55.522>the <00:11:55.677>outside. <00:11:55.833>You <00:11:55.988>can <00:11:56.144>see <00:11:56.300>that

244
00:11:57.200 --> 00:11:59.600
<00:11:57.200>this <00:11:57.666>this <00:11:58.133>in <00:11:58.600>the

245
00:12:00.500 --> 00:12:01.500
inspector

246
00:12:02.200 --> 00:12:05.900
<00:12:02.200>This <00:12:02.327>is <00:12:02.454>the <00:12:02.581>Old <00:12:02.709>Situation <00:12:02.836>you <00:12:02.963>can <00:12:03.090>see <00:12:03.218>we <00:12:03.345>say <00:12:03.472>F1 <00:12:03.600>code

247
00:12:05.900 --> 00:12:07.900
<00:12:05.900>style <00:12:06.366>color <00:12:06.833>is <00:12:07.300>blue.

248
00:12:08.800 --> 00:12:11.400
<00:12:08.800>But <00:12:09.033>here <00:12:09.266>in <00:12:09.500>the <00:12:09.733>later <00:12:09.966>situation, <00:12:10.199>there

249
00:12:11.400 --> 00:12:15.200
<00:12:11.400>we <00:12:11.540>go. <00:12:11.680>We <00:12:11.819>have <00:12:11.959>the <00:12:12.100>shadow <00:12:12.240>route. <00:12:12.380>So <00:12:12.520>it's <00:12:12.660>it's <00:12:12.800>own

250
00:12:14.200 --> 00:12:18.000
<00:12:14.200>little <00:12:14.433>dumb <00:12:14.666>that <00:12:14.900>nobody <00:12:15.133>can <00:12:15.366>touch <00:12:15.600>and

251
00:12:17.300 --> 00:12:20.000
<00:12:17.300>that's <00:12:17.455>really <00:12:17.611>nice <00:12:17.766>about <00:12:17.922>the <00:12:18.077>shadow <00:12:18.233>Dom. <00:12:18.388>I <00:12:18.544>would <00:12:18.699>say

252
00:12:23.400 --> 00:12:26.200
<00:12:23.400>That's <00:12:23.555>all <00:12:23.711>fine. <00:12:23.866>You <00:12:24.022>know, <00:12:24.177>we <00:12:24.333>had <00:12:24.488>some <00:12:24.644>styling <00:12:24.800>in

253
00:12:26.200 --> 00:12:27.700
<00:12:26.200>the <00:12:26.875>components <00:12:27.550>itself.

254
00:12:28.500 --> 00:12:31.200
<00:12:28.500>But <00:12:28.733>yeah, <00:12:28.966>not <00:12:29.200>everybody <00:12:29.433>wants <00:12:29.666>to <00:12:29.900>have

255
00:12:31.200 --> 00:12:34.800
<00:12:31.200>a <00:12:31.300>blue <00:12:31.400>paragraph <00:12:31.500>you <00:12:31.600>want <00:12:31.700>to <00:12:31.800>be <00:12:31.900>able <00:12:32.000>to <00:12:32.100>style <00:12:32.200>that <00:12:32.300>from <00:12:32.400>the <00:12:32.500>outside. <00:12:32.600>So

256
00:12:34.800 --> 00:12:38.000
<00:12:34.800>one <00:12:35.000>thing <00:12:35.199>we <00:12:35.400>can <00:12:35.599>do <00:12:35.800>is <00:12:36.000>use <00:12:36.199>CSS

257
00:12:37.000 --> 00:12:38.300
variables.

258
00:12:41.300 --> 00:12:41.500
and

259
00:12:42.600 --> 00:12:43.700
<00:12:42.600>I'm <00:12:42.930>chasing <00:12:43.260>this <00:12:43.590>green.

260
00:12:47.200 --> 00:12:51.100
<00:12:47.200>To <00:12:47.355>a <00:12:47.511>variable <00:12:47.666>called <00:12:47.822>for <00:12:47.977>instance <00:12:48.133>primary <00:12:48.288>color <00:12:48.444>and <00:12:48.600>then

261
00:12:50.100 --> 00:12:53.900
<00:12:50.100>I <00:12:50.275>deaf <00:12:50.450>Define <00:12:50.625>it <00:12:50.800>on <00:12:50.975>the <00:12:51.150>root <00:12:51.325>pseudo <00:12:51.500>element.

262
00:12:54.800 --> 00:12:55.400
<00:12:54.800>Saying <00:12:55.339>well.

263
00:12:56.500 --> 00:12:59.000
<00:12:56.500>The <00:12:56.850>primary <00:12:57.200>color <00:12:57.550>is <00:12:57.900>green.

264
00:13:02.500 --> 00:13:05.400
<00:13:02.500>And <00:13:02.616>now <00:13:02.733>you <00:13:02.850>can <00:13:02.966>see <00:13:03.083>it's <00:13:03.200>green <00:13:03.316>again. <00:13:03.433>The <00:13:03.550>first <00:13:03.666>one <00:13:03.783>we <00:13:03.900>can

265
00:13:05.400 --> 00:13:08.100
<00:13:05.400>do <00:13:05.527>the <00:13:05.654>same <00:13:05.781>thing <00:13:05.909>just <00:13:06.036>be <00:13:06.163>lazy <00:13:06.290>and <00:13:06.418>copy <00:13:06.545>and <00:13:06.672>paste <00:13:06.800>this.

266
00:13:08.700 --> 00:13:09.400
<00:13:08.700>in <00:13:09.015>our <00:13:09.329>component

267
00:13:10.200 --> 00:13:11.300
<00:13:10.200>So <00:13:10.695>replacing <00:13:11.189>this.

268
00:13:15.100 --> 00:13:15.900
<00:13:15.100>paste <00:13:15.460>it <00:13:15.819>and

269
00:13:17.400 --> 00:13:20.800
<00:13:17.400>there <00:13:17.555>we <00:13:17.711>have <00:13:17.866>it. <00:13:18.022>Well, <00:13:18.177>it's <00:13:18.333>green. <00:13:18.488>Let's <00:13:18.644>change <00:13:18.800>it

270
00:13:20.800 --> 00:13:21.300
<00:13:20.800>to <00:13:21.250>Blue.

271
00:13:22.700 --> 00:13:24.100
<00:13:22.700>damn <00:13:23.960>new

272
00:13:25.300 --> 00:13:29.000
<00:13:25.300>You <00:13:25.416>have <00:13:25.533>to <00:13:25.650>use <00:13:25.766>host <00:13:25.883>in <00:13:26.000>this <00:13:26.116>case <00:13:26.233>root <00:13:26.349>is <00:13:26.466>not <00:13:26.583>usable <00:13:26.699>inside

273
00:13:28.100 --> 00:13:29.800
<00:13:28.100>of <00:13:28.800>web <00:13:29.500>component.

274
00:13:30.500 --> 00:13:32.700
<00:13:30.500>You <00:13:30.655>have <00:13:30.811>to <00:13:30.966>use <00:13:31.122>host. <00:13:31.277>So <00:13:31.433>keep <00:13:31.588>that <00:13:31.744>in <00:13:31.900>mind.

275
00:13:36.500 --> 00:13:40.400
<00:13:36.500>But <00:13:36.655>what <00:13:36.811>if <00:13:36.966>you <00:13:37.122>want <00:13:37.277>to <00:13:37.433>have <00:13:37.588>people <00:13:37.744>have <00:13:37.900>a

276
00:13:40.400 --> 00:13:42.300
<00:13:40.400>say <00:13:40.540>about <00:13:40.680>the <00:13:40.819>colors, <00:13:40.959>right? <00:13:41.100>We <00:13:41.240>now <00:13:41.380>have <00:13:41.520>the <00:13:41.660>variables <00:13:41.800>there.

277
00:13:43.100 --> 00:13:45.500
<00:13:43.100>But <00:13:43.240>let's <00:13:43.380>see <00:13:43.520>if <00:13:43.660>they <00:13:43.800>can <00:13:43.940>change <00:13:44.080>it <00:13:44.220>from <00:13:44.360>the <00:13:44.500>outside.

278
00:13:46.700 --> 00:13:49.600
<00:13:46.700>I <00:13:46.855>added <00:13:47.011>two <00:13:47.166>new <00:13:47.322>ones. <00:13:47.477>Now. <00:13:47.633>I <00:13:47.788>also <00:13:47.944>added <00:13:48.100>the

279
00:13:49.600 --> 00:13:52.100
<00:13:49.600>IndyCar <00:13:49.800>quote <00:13:50.000>just <00:13:50.200>to <00:13:50.400>see <00:13:50.600>a <00:13:50.800>difference <00:13:51.000>in

280
00:13:52.100 --> 00:13:53.300
<00:13:52.100>ways <00:13:52.370>we <00:13:52.640>can <00:13:52.910>do <00:13:53.180>it.

281
00:13:57.000 --> 00:13:57.200
So

282
00:13:58.100 --> 00:14:01.500
<00:13:58.100>I'm <00:13:58.255>importing <00:13:58.411>both <00:13:58.566>components. <00:13:58.722>So <00:13:58.877>I <00:13:59.033>have <00:13:59.188>to <00:13:59.344>use <00:13:59.500>it

283
00:14:01.500 --> 00:14:05.000
<00:14:01.500>as <00:14:01.627>a <00:14:01.754>module <00:14:01.881>in <00:14:02.009>my <00:14:02.136>HTML <00:14:02.263>but <00:14:02.390>here <00:14:02.518>I <00:14:02.645>have <00:14:02.772>the <00:14:02.900>F1

284
00:14:04.000 --> 00:14:05.200
quote.

285
00:14:05.800 --> 00:14:08.100
<00:14:05.800>With <00:14:06.000>some <00:14:06.199>styling <00:14:06.400>and <00:14:06.599>the <00:14:06.800>Indigo <00:14:07.000>code <00:14:07.199>as

286
00:14:08.100 --> 00:14:08.200
well.

287
00:14:09.300 --> 00:14:10.800
<00:14:09.300>What <00:14:09.525>I <00:14:09.750>now <00:14:09.974>can <00:14:10.199>do <00:14:10.425>is <00:14:10.650>add.

288
00:14:11.500 --> 00:14:13.400
<00:14:11.500>styling <00:14:11.850>based <00:14:12.200>on <00:14:12.550>those <00:14:12.900>variables

289
00:14:15.100 --> 00:14:16.900
<00:14:15.100>So <00:14:15.275>for <00:14:15.450>instance, <00:14:15.625>let's <00:14:15.800>say <00:14:15.975>you <00:14:16.150>have <00:14:16.325>one <00:14:16.500>quote.

290
00:14:17.800 --> 00:14:20.400
<00:14:17.800>I'm <00:14:18.033>setting <00:14:18.266>some <00:14:18.500>primary <00:14:18.733>secondary <00:14:18.966>and <00:14:19.199>tertiary

291
00:14:20.400 --> 00:14:21.800
<00:14:20.400>colors <00:14:20.651>and <00:14:20.904>now <00:14:21.156>it's <00:14:21.408>changed, <00:14:21.660>right?

292
00:14:23.100 --> 00:14:23.400
<00:14:23.100>That's <00:14:23.370>cool.

293
00:14:25.300 --> 00:14:27.900
<00:14:25.300>Here <00:14:25.439>I'm <00:14:25.579>going <00:14:25.719>to <00:14:25.859>do <00:14:26.000>something <00:14:26.140>different <00:14:26.280>in <00:14:26.420>the <00:14:26.560>IndyCar <00:14:26.699>quotes.

294
00:14:28.500 --> 00:14:31.200
<00:14:28.500>I <00:14:28.655>want <00:14:28.811>to <00:14:28.966>have <00:14:29.122>a <00:14:29.277>default <00:14:29.433>color. <00:14:29.588>So <00:14:29.744>what <00:14:29.900>I'm

295
00:14:31.200 --> 00:14:34.300
<00:14:31.200>doing <00:14:31.375>is <00:14:31.550>I'm <00:14:31.725>introducing <00:14:31.900>a <00:14:32.075>new <00:14:32.250>variable <00:14:32.425>that <00:14:32.600>I'm

296
00:14:34.300 --> 00:14:35.900
<00:14:34.300>going <00:14:34.579>to <00:14:34.859>use <00:14:35.140>in <00:14:35.420>my <00:14:35.699>HTML.

297
00:14:36.600 --> 00:14:38.600
<00:14:36.600>But <00:14:36.880>it <00:14:37.160>isn't <00:14:37.440>defined <00:14:37.720>here <00:14:38.000>in.

298
00:14:39.900 --> 00:14:40.800
<00:14:39.900>in <00:14:40.305>my <00:14:40.709>component

299
00:14:41.600 --> 00:14:44.300
<00:14:41.600>So <00:14:41.775>I'm <00:14:41.950>setting <00:14:42.125>the <00:14:42.300>IndyCar <00:14:42.475>primary <00:14:42.650>color <00:14:42.825>and <00:14:43.000>you

300
00:14:44.300 --> 00:14:47.000
<00:14:44.300>will <00:14:44.500>see <00:14:44.699>the <00:14:44.900>secondary <00:14:45.099>call <00:14:45.300>and <00:14:45.500>tertiary <00:14:45.699>color.

301
00:14:47.800 --> 00:14:50.000
<00:14:47.800>but <00:14:48.079>have <00:14:48.359>a <00:14:48.640>fallback <00:14:48.920>to <00:14:49.199>the

302
00:14:51.500 --> 00:14:53.500
<00:14:51.500>variables <00:14:51.733>are <00:14:51.966>already <00:14:52.200>head <00:14:52.433>there <00:14:52.666>and <00:14:52.900>colors.

303
00:14:55.600 --> 00:14:58.400
<00:14:55.600>Yes <00:14:55.740>and <00:14:55.880>a <00:14:56.020>type <00:14:56.160>slow <00:14:56.300>I <00:14:56.440>know <00:14:56.580>and <00:14:56.720>make <00:14:56.860>mistakes <00:14:57.000>even

304
00:14:58.400 --> 00:14:59.200
<00:14:58.400>while <00:14:58.760>I'm <00:14:59.120>recording.

305
00:15:02.400 --> 00:15:03.500
<00:15:02.400>But <00:15:02.598>this <00:15:02.795>is <00:15:02.994>the <00:15:03.192>last <00:15:03.390>one.

306
00:15:04.500 --> 00:15:05.200
<00:15:04.500>I <00:15:04.710>said <00:15:04.920>it <00:15:05.130>to

307
00:15:06.600 --> 00:15:07.400
<00:15:06.600>another <00:15:07.319>variable

308
00:15:11.800 --> 00:15:14.300
<00:15:11.800>and <00:15:12.000>then <00:15:12.199>it's <00:15:12.400>back <00:15:12.599>to <00:15:12.800>the <00:15:13.000>default <00:15:13.199>because

309
00:15:14.300 --> 00:15:16.300
<00:15:14.300>we <00:15:14.500>haven't <00:15:14.699>said <00:15:14.900>anything <00:15:15.099>in <00:15:15.300>the <00:15:15.500>HTML <00:15:15.699>yet.

310
00:15:17.200 --> 00:15:19.900
<00:15:17.200>So <00:15:17.327>let's <00:15:17.454>go <00:15:17.581>to <00:15:17.709>the <00:15:17.836>HTML <00:15:17.963>and <00:15:18.090>say <00:15:18.218>well, <00:15:18.345>let's <00:15:18.472>set <00:15:18.600>some

311
00:15:20.500 --> 00:15:21.600
<00:15:20.500>variables <00:15:20.747>on <00:15:20.995>the <00:15:21.242>root <00:15:21.490>there

312
00:15:23.200 --> 00:15:25.000
<00:15:23.200>and <00:15:23.433>there <00:15:23.666>you <00:15:23.900>have <00:15:24.133>it <00:15:24.366>it's <00:15:24.600>changed.

313
00:15:25.800 --> 00:15:28.500
<00:15:25.800>But <00:15:25.974>I'm <00:15:26.150>not <00:15:26.324>really <00:15:26.500>happy <00:15:26.675>with <00:15:26.849>the <00:15:27.025>F1 <00:15:27.199>code

314
00:15:28.500 --> 00:15:31.300
<00:15:28.500>for <00:15:28.675>instance <00:15:28.850>because <00:15:29.025>maybe <00:15:29.200>have <00:15:29.375>multiple <00:15:29.550>F1 <00:15:29.725>quotes <00:15:29.900>as

315
00:15:31.300 --> 00:15:33.100
<00:15:31.300>well. <00:15:31.533>So <00:15:31.766>let's <00:15:32.000>give <00:15:32.233>it <00:15:32.466>a <00:15:32.699>class.

316
00:15:34.200 --> 00:15:34.900
<00:15:34.200>of <00:15:34.829>Max

317
00:15:36.300 --> 00:15:36.800
<00:15:36.300>and <00:15:36.750>edit

318
00:15:37.700 --> 00:15:40.300
<00:15:37.700>there <00:15:37.933>as <00:15:38.166>well <00:15:38.400>and <00:15:38.633>then <00:15:38.866>you <00:15:39.100>have

319
00:15:40.300 --> 00:15:43.700
<00:15:40.300>a <00:15:40.500>little <00:15:40.699>bit <00:15:40.900>more <00:15:41.099>control <00:15:41.300>over <00:15:41.500>what <00:15:41.699>you're

320
00:15:43.700 --> 00:15:44.300
styling.

321
00:15:45.300 --> 00:15:47.500
<00:15:45.300>But <00:15:45.427>still, <00:15:45.554>I <00:15:45.681>think <00:15:45.809>it's <00:15:45.936>not <00:15:46.063>the <00:15:46.190>best <00:15:46.318>way <00:15:46.445>to <00:15:46.572>do <00:15:46.699>it.

322
00:15:48.200 --> 00:15:49.000
<00:15:48.200>you <00:15:48.380>can <00:15:48.560>do <00:15:48.740>it, <00:15:48.920>but

323
00:15:50.300 --> 00:15:53.100
<00:15:50.300>I <00:15:50.439>would <00:15:50.579>think <00:15:50.719>there's <00:15:50.859>a <00:15:51.000>better <00:15:51.140>way <00:15:51.280>and <00:15:51.420>the <00:15:51.560>better <00:15:51.699>way

324
00:15:53.100 --> 00:15:56.600
<00:15:53.100>is <00:15:53.255>to <00:15:53.411>give <00:15:53.566>the <00:15:53.722>user <00:15:53.877>of <00:15:54.033>the <00:15:54.188>component <00:15:54.344>you <00:15:54.500>as

325
00:15:56.600 --> 00:15:59.600
<00:15:56.600>a <00:15:56.880>developer <00:15:57.160>way <00:15:57.440>more <00:15:57.720>control <00:15:58.000>over

326
00:15:59.600 --> 00:16:01.600
<00:15:59.600>the <00:15:59.775>styling <00:15:59.950>and <00:16:00.125>we <00:16:00.300>can <00:16:00.475>do <00:16:00.650>that <00:16:00.825>with <00:16:01.000>the

327
00:16:02.400 --> 00:16:04.100
<00:16:02.400>part <00:16:03.800>pseudo-element

328
00:16:04.900 --> 00:16:07.100
<00:16:04.900>And <00:16:05.250>it's <00:16:05.600>easy <00:16:05.949>to <00:16:06.300>implement.

329
00:16:08.600 --> 00:16:11.100
<00:16:08.600>And <00:16:08.775>it's <00:16:08.950>so <00:16:09.125>powerful. <00:16:09.300>So <00:16:09.475>if <00:16:09.650>I <00:16:09.825>go <00:16:10.000>to

330
00:16:11.100 --> 00:16:12.600
<00:16:11.100>my <00:16:11.775>component <00:16:12.450>again.

331
00:16:13.500 --> 00:16:16.100
<00:16:13.500>I'm <00:16:13.675>going <00:16:13.850>to <00:16:14.025>say <00:16:14.200>well <00:16:14.375>this <00:16:14.550>this <00:16:14.725>paragraph <00:16:14.900>is

332
00:16:16.100 --> 00:16:18.600
<00:16:16.100>now <00:16:16.380>part <00:16:16.660>A <00:16:16.940>Part <00:16:17.220>called <00:16:17.500>quote.

333
00:16:20.900 --> 00:16:22.300
<00:16:20.900>nothing <00:16:21.319>happens <00:16:21.740>yet <00:16:22.160>until

334
00:16:23.200 --> 00:16:24.700
<00:16:23.200>I'm <00:16:23.470>gonna <00:16:23.740>write <00:16:24.010>some <00:16:24.280>CSS <00:16:24.550>here.

335
00:16:25.400 --> 00:16:26.400
<00:16:25.400>I'm <00:16:25.625>going <00:16:25.850>to <00:16:26.074>say <00:16:26.300>well.

336
00:16:30.800 --> 00:16:32.600
<00:16:30.800>of <00:16:31.266>the <00:16:31.733>F1 <00:16:32.199>quote

337
00:16:34.500 --> 00:16:36.200
<00:16:34.500>the <00:16:34.850>part <00:16:35.200>that's <00:16:35.550>named <00:16:35.900>quote.

338
00:16:38.500 --> 00:16:42.000
<00:16:38.500>I'm <00:16:38.655>now <00:16:38.811>going <00:16:38.966>to <00:16:39.122>apply <00:16:39.277>a <00:16:39.433>bunch <00:16:39.588>of <00:16:39.744>CSS <00:16:39.900>myself.

339
00:16:42.800 --> 00:16:45.400
<00:16:42.800>And <00:16:43.033>now <00:16:43.266>it <00:16:43.500>completely <00:16:43.733>completely <00:16:43.966>overrides <00:16:44.199>what

340
00:16:45.400 --> 00:16:48.800
<00:16:45.400>styled <00:16:45.633>from <00:16:45.866>within <00:16:46.100>the <00:16:46.333>component <00:16:46.566>but <00:16:46.800>you

341
00:16:48.800 --> 00:16:51.100
<00:16:48.800>can <00:16:48.927>do <00:16:49.054>all <00:16:49.181>the <00:16:49.309>things <00:16:49.436>you <00:16:49.563>want <00:16:49.690>with <00:16:49.818>it. <00:16:49.945>So <00:16:50.072>I <00:16:50.199>think

342
00:16:51.100 --> 00:16:52.300
<00:16:51.100>this <00:16:51.370>is <00:16:51.640>really <00:16:51.910>really <00:16:52.180>powerful.

343
00:16:53.400 --> 00:16:56.300
<00:16:53.400>And <00:16:53.574>probably <00:16:53.750>the <00:16:53.925>best <00:16:54.100>way <00:16:54.275>to <00:16:54.449>support <00:16:54.625>styling <00:16:54.800>as

344
00:16:56.300 --> 00:16:56.300
well.

345
00:17:00.300 --> 00:17:03.400
<00:17:00.300>All <00:17:00.474>great <00:17:00.650>we <00:17:00.824>have <00:17:01.000>a <00:17:01.175>static <00:17:01.349>paragraph <00:17:01.525>in <00:17:01.699>a

346
00:17:03.400 --> 00:17:05.600
<00:17:03.400>component, <00:17:03.507>but <00:17:03.615>that's <00:17:03.723>not <00:17:03.830>what <00:17:03.938>we <00:17:04.046>want. <00:17:04.153>Right <00:17:04.261>you <00:17:04.369>want <00:17:04.476>to <00:17:04.584>be <00:17:04.692>able <00:17:04.800>to

347
00:17:07.600 --> 00:17:10.700
<00:17:07.599>Past <00:17:07.949>data <00:17:08.300>or <00:17:08.649>set <00:17:09.000>strings

348
00:17:10.700 --> 00:17:12.200
<00:17:10.700>and <00:17:10.868>stuff <00:17:11.037>like <00:17:11.206>that <00:17:11.375>so <00:17:11.543>we <00:17:11.712>can <00:17:11.881>use <00:17:12.050>properties.

349
00:17:13.600 --> 00:17:16.300
<00:17:13.599>And <00:17:13.727>to <00:17:13.854>be <00:17:13.981>able <00:17:14.109>to <00:17:14.236>use <00:17:14.363>properties <00:17:14.490>you <00:17:14.618>have <00:17:14.745>to <00:17:14.872>have <00:17:15.000>a

350
00:17:16.300 --> 00:17:18.200
<00:17:16.300>getter <00:17:16.533>and <00:17:16.766>a <00:17:17.000>Setter <00:17:17.233>in <00:17:17.466>your <00:17:17.700>component.

351
00:17:19.600 --> 00:17:22.800
<00:17:19.599>And <00:17:19.727>essentially <00:17:19.854>what <00:17:19.981>you <00:17:20.109>are <00:17:20.236>saying <00:17:20.363>is <00:17:20.490>you're <00:17:20.618>using <00:17:20.745>an <00:17:20.872>internal <00:17:21.000>variable.

352
00:17:22.800 --> 00:17:25.100
<00:17:22.800>I'm <00:17:23.149>calling <00:17:23.500>this <00:17:23.849>underscore <00:17:24.200>quote.

353
00:17:26.200 --> 00:17:29.400
<00:17:26.200>And <00:17:26.375>that <00:17:26.550>will <00:17:26.725>take <00:17:26.900>care <00:17:27.075>of <00:17:27.250>setting <00:17:27.425>the <00:17:27.600>inner

354
00:17:29.400 --> 00:17:31.900
<00:17:29.400>HTML <00:17:29.633>that's <00:17:29.866>mentioned <00:17:30.100>above <00:17:30.333>in <00:17:30.566>the <00:17:30.800>template.

355
00:17:37.300 --> 00:17:39.900
<00:17:37.300>you <00:17:37.500>get <00:17:37.700>it <00:17:37.899>a <00:17:38.100>Setter <00:17:38.300>together, <00:17:38.500>and <00:17:38.700>I'm

356
00:17:41.600 --> 00:17:42.600
<00:17:41.600>getting <00:17:42.500>the

357
00:17:43.700 --> 00:17:46.500
<00:17:43.700>The <00:17:43.933>template <00:17:44.166>paragraph <00:17:44.400>there, <00:17:44.633>it's <00:17:44.866>empty. <00:17:45.100>Now.

358
00:17:46.500 --> 00:17:50.000
<00:17:46.500>There's <00:17:46.600>nothing <00:17:46.700>in <00:17:46.800>it. <00:17:46.900>So <00:17:47.000>it <00:17:47.100>will <00:17:47.200>be <00:17:47.300>blank <00:17:47.400>if <00:17:47.500>you <00:17:47.600>use <00:17:47.700>it <00:17:47.800>without <00:17:47.900>providing

359
00:17:49.300 --> 00:17:50.700
<00:17:49.300>any <00:17:50.560>properties.

360
00:17:52.400 --> 00:17:55.300
<00:17:52.400>You <00:17:52.507>can <00:17:52.615>see <00:17:52.723>there. <00:17:52.830>It's <00:17:52.938>empty. <00:17:53.046>But <00:17:53.153>what <00:17:53.261>I <00:17:53.369>can <00:17:53.476>do <00:17:53.584>now <00:17:53.692>here <00:17:53.800>is

361
00:17:55.300 --> 00:17:55.600
just

362
00:17:57.200 --> 00:17:59.000
<00:17:57.200>query <00:17:58.600>selected

363
00:18:00.500 --> 00:18:01.400
<00:18:00.500>call <00:18:00.770>it <00:18:01.040>a <00:18:01.310>component.

364
00:18:03.700 --> 00:18:06.300
<00:18:03.700>I <00:18:03.875>can <00:18:04.050>Target <00:18:04.225>I <00:18:04.400>call <00:18:04.575>the <00:18:04.750>driver <00:18:04.925>quote <00:18:05.100>now

365
00:18:06.300 --> 00:18:08.700
<00:18:06.300>not <00:18:06.533>everyone <00:18:06.766>quote <00:18:07.000>anymore, <00:18:07.233>but <00:18:07.466>driver <00:18:07.700>quote.

366
00:18:10.600 --> 00:18:13.500
<00:18:10.600>And <00:18:10.755>now <00:18:10.911>I <00:18:11.066>have <00:18:11.222>access <00:18:11.377>to <00:18:11.533>it <00:18:11.688>and <00:18:11.844>I <00:18:12.000>just

367
00:18:13.500 --> 00:18:15.000
<00:18:13.500>can <00:18:13.950>say <00:18:14.400>component <00:18:14.850>Dot.

368
00:18:17.400 --> 00:18:18.600
<00:18:17.400>quote <00:18:17.940>because <00:18:18.480>that's

369
00:18:19.600 --> 00:18:22.300
<00:18:19.600>our <00:18:19.949>property <00:18:20.300>and <00:18:20.649>I'm <00:18:21.000>pasting

370
00:18:22.300 --> 00:18:26.000
<00:18:22.300>again <00:18:22.649>Max's <00:18:23.000>comment <00:18:23.350>from <00:18:23.700>2017.

371
00:18:27.500 --> 00:18:27.800
Great.

372
00:18:28.700 --> 00:18:30.500
<00:18:28.700>We <00:18:29.050>have <00:18:29.400>access <00:18:29.750>through <00:18:30.100>JavaScript.

373
00:18:31.500 --> 00:18:33.900
<00:18:31.500>But <00:18:31.655>maybe <00:18:31.811>you <00:18:31.966>don't <00:18:32.122>need <00:18:32.277>that. <00:18:32.433>Maybe <00:18:32.588>it's <00:18:32.744>too <00:18:32.900>much.

374
00:18:34.700 --> 00:18:37.600
<00:18:34.700>So <00:18:34.840>we <00:18:34.980>can <00:18:35.120>use <00:18:35.260>attributes <00:18:35.400>just <00:18:35.540>like <00:18:35.680>you <00:18:35.820>can <00:18:35.960>use <00:18:36.100>attributes

375
00:18:37.600 --> 00:18:38.300
<00:18:37.600>or <00:18:37.915>normal <00:18:38.230>elements.

376
00:18:39.800 --> 00:18:42.600
<00:18:39.800>So <00:18:39.955>if <00:18:40.111>you <00:18:40.266>look <00:18:40.422>here <00:18:40.577>I <00:18:40.733>have <00:18:40.888>an <00:18:41.044>attribute <00:18:41.200>called

377
00:18:42.600 --> 00:18:42.800
quote.

378
00:18:44.200 --> 00:18:47.600
<00:18:44.200>And <00:18:44.375>this <00:18:44.550>will <00:18:44.725>pass <00:18:44.900>the <00:18:45.075>quote <00:18:45.250>to <00:18:45.425>the <00:18:45.600>component.

379
00:18:49.200 --> 00:18:52.500
<00:18:49.200>What <00:18:49.300>we <00:18:49.400>do <00:18:49.500>need <00:18:49.600>to <00:18:49.700>do <00:18:49.800>here <00:18:49.900>is <00:18:50.000>we <00:18:50.100>still <00:18:50.200>need <00:18:50.300>to <00:18:50.400>get <00:18:50.500>around <00:18:50.600>the

380
00:18:52.500 --> 00:18:54.100
<00:18:52.500>center, <00:18:52.780>but <00:18:53.060>we <00:18:53.340>need <00:18:53.620>something <00:18:53.900>extra.

381
00:18:55.400 --> 00:18:59.000
<00:18:55.400>We <00:18:55.575>need <00:18:55.750>to <00:18:55.925>make <00:18:56.100>sure <00:18:56.275>and <00:18:56.450>that's <00:18:56.625>essentially <00:18:56.800>the

382
00:18:58.300 --> 00:19:01.400
<00:18:58.300>last <00:18:58.533>part <00:18:58.766>of <00:18:59.000>it <00:18:59.233>that <00:18:59.466>we <00:18:59.700>are

383
00:19:01.400 --> 00:19:04.900
<00:19:01.400>listening <00:19:01.555>to <00:19:01.711>event <00:19:01.866>that's <00:19:02.022>called <00:19:02.177>attribute <00:19:02.333>chains <00:19:02.488>callback. <00:19:02.644>So <00:19:02.800>every

384
00:19:04.900 --> 00:19:07.500
<00:19:04.900>time <00:19:05.180>an <00:19:05.460>attribute <00:19:05.740>is <00:19:06.020>changed <00:19:06.300>we

385
00:19:07.500 --> 00:19:10.300
<00:19:07.500>moved <00:19:07.675>or <00:19:07.850>added. <00:19:08.025>This <00:19:08.200>will <00:19:08.375>be <00:19:08.550>triggered <00:19:08.725>and <00:19:08.900>we're

386
00:19:10.300 --> 00:19:13.800
<00:19:10.300>getting <00:19:10.440>the <00:19:10.580>attribute <00:19:10.720>name. <00:19:10.860>We're <00:19:11.000>getting <00:19:11.139>the <00:19:11.280>old <00:19:11.419>value <00:19:11.560>and <00:19:11.700>the

387
00:19:13.800 --> 00:19:14.100
<00:19:13.800>new <00:19:14.070>value.

388
00:19:16.100 --> 00:19:19.500
<00:19:16.100>And <00:19:16.255>what <00:19:16.411>are <00:19:16.566>they <00:19:16.722>here <00:19:16.877>is <00:19:17.033>I'm <00:19:17.188>listening <00:19:17.344>if <00:19:17.500>it's

389
00:19:19.500 --> 00:19:22.400
<00:19:19.500>the <00:19:19.675>quote <00:19:19.850>and <00:19:20.025>if <00:19:20.200>it's <00:19:20.375>the <00:19:20.550>quote, <00:19:20.725>I <00:19:20.900>will

390
00:19:22.400 --> 00:19:23.300
<00:19:22.400>put <00:19:22.562>that <00:19:22.724>as <00:19:22.886>the <00:19:23.048>new <00:19:23.210>value.

391
00:19:24.200 --> 00:19:28.100
<00:19:24.200>But <00:19:24.300>you <00:19:24.400>need <00:19:24.500>something <00:19:24.600>extra <00:19:24.700>and <00:19:24.800>that's <00:19:24.900>on <00:19:25.000>top <00:19:25.100>you <00:19:25.200>need <00:19:25.300>to <00:19:25.400>have <00:19:25.500>a <00:19:25.600>static

392
00:19:27.100 --> 00:19:30.300
<00:19:27.100>method <00:19:27.566>called <00:19:28.033>observed <00:19:28.500>attributes.

393
00:19:31.100 --> 00:19:34.300
<00:19:31.100>To <00:19:31.227>give <00:19:31.354>an <00:19:31.481>array <00:19:31.609>to <00:19:31.736>the <00:19:31.863>browser <00:19:31.990>saying <00:19:32.118>well <00:19:32.245>listen <00:19:32.372>to <00:19:32.500>these

394
00:19:34.300 --> 00:19:38.700
<00:19:34.300>attributes <00:19:34.500>because <00:19:34.700>an <00:19:34.899>element <00:19:35.100>can <00:19:35.300>have <00:19:35.500>multiple <00:19:35.700>very

395
00:19:37.700 --> 00:19:40.900
<00:19:37.700>multiple <00:19:39.100>attributes.

396
00:19:41.700 --> 00:19:44.400
<00:19:41.700>But <00:19:41.816>you <00:19:41.933>don't <00:19:42.050>want <00:19:42.166>to <00:19:42.283>listen <00:19:42.400>to <00:19:42.516>all <00:19:42.633>of <00:19:42.750>them <00:19:42.866>because <00:19:42.983>it <00:19:43.100>will

397
00:19:44.400 --> 00:19:46.900
<00:19:44.400>take <00:19:44.540>a <00:19:44.680>lot <00:19:44.820>of <00:19:44.960>power <00:19:45.100>and <00:19:45.240>it <00:19:45.380>will <00:19:45.520>slow <00:19:45.660>things <00:19:45.800>down.

398
00:19:47.800 --> 00:19:49.300
<00:19:47.800>So <00:19:47.992>I'm <00:19:48.185>only <00:19:48.378>listening <00:19:48.571>to <00:19:48.764>the <00:19:48.957>code <00:19:49.149>here.

399
00:19:50.200 --> 00:19:53.700
<00:19:50.200>So <00:19:50.433>a <00:19:50.666>very <00:19:50.900>simple <00:19:51.133>example <00:19:51.366>you <00:19:51.600>already

400
00:19:53.700 --> 00:19:55.500
<00:19:53.700>solving <00:19:53.933>codes <00:19:54.166>like <00:19:54.400>I'm <00:19:54.633>adding <00:19:54.866>code <00:19:55.100>here.

401
00:19:57.200 --> 00:19:57.800
<00:19:57.200>And <00:19:57.470>out <00:19:57.740>there.

402
00:19:59.300 --> 00:20:01.500
<00:19:59.300>But <00:19:59.500>I <00:19:59.700>can <00:19:59.899>still <00:20:00.100>go <00:20:00.300>to <00:20:00.500>the <00:20:00.700>JavaScript.

403
00:20:03.500 --> 00:20:06.000
<00:20:03.500>And <00:20:03.850>overrided <00:20:04.200>by <00:20:04.550>a <00:20:04.900>property.

404
00:20:07.300 --> 00:20:10.900
<00:20:07.300>Or <00:20:07.533>change <00:20:07.766>the <00:20:08.000>attribute <00:20:08.233>through <00:20:08.466>CSS <00:20:08.700>instead

405
00:20:10.900 --> 00:20:12.700
<00:20:10.900>of <00:20:11.250>in <00:20:11.600>the <00:20:11.950>HTML <00:20:12.300>itself.

406
00:20:14.500 --> 00:20:17.000
<00:20:14.500>So <00:20:14.627>you <00:20:14.754>have <00:20:14.881>multiple <00:20:15.009>ways <00:20:15.136>to <00:20:15.263>do <00:20:15.390>that, <00:20:15.518>but <00:20:15.645>keep <00:20:15.772>in <00:20:15.900>mind

407
00:20:17.000 --> 00:20:17.300
that.

408
00:20:18.300 --> 00:20:21.000
<00:20:18.300>attributes <00:20:18.533>Can <00:20:18.766>Only <00:20:19.000>Be <00:20:19.233>Strings <00:20:19.466>if <00:20:19.700>you

409
00:20:21.100 --> 00:20:22.700
<00:20:21.100>want <00:20:21.300>to <00:20:21.500>pause <00:20:21.699>an <00:20:21.899>object <00:20:22.100>or <00:20:22.300>an <00:20:22.500>array

410
00:20:23.300 --> 00:20:26.300
<00:20:23.300>Then <00:20:23.427>you <00:20:23.554>have <00:20:23.681>to <00:20:23.809>use <00:20:23.936>properties <00:20:24.063>and <00:20:24.190>fall <00:20:24.318>back <00:20:24.445>to <00:20:24.572>JavaScript <00:20:24.700>in

411
00:20:26.300 --> 00:20:26.600
<00:20:26.300>this <00:20:26.570>case.

412
00:20:28.900 --> 00:20:31.100
<00:20:28.900>You <00:20:29.250>might <00:20:29.600>have <00:20:29.950>seen <00:20:30.300>that

413
00:20:31.100 --> 00:20:32.100
<00:20:31.100>I <00:20:31.399>call <00:20:31.699>it <00:20:32.000>quote.

414
00:20:33.600 --> 00:20:34.800
<00:20:33.600>a <00:20:33.870>good <00:20:34.139>practice <00:20:34.409>is <00:20:34.679>to

415
00:20:35.700 --> 00:20:38.500
<00:20:35.700>use <00:20:35.980>data <00:20:36.260>attributes. <00:20:36.540>If <00:20:36.820>you <00:20:37.100>are

416
00:20:38.500 --> 00:20:41.600
<00:20:38.500>introducing <00:20:38.850>your <00:20:39.200>own <00:20:39.550>attributes, <00:20:39.900>so

417
00:20:41.600 --> 00:20:44.300
<00:20:41.600>data <00:20:41.800>Dash, <00:20:42.000>they <00:20:42.199>should <00:20:42.399>have <00:20:42.600>been <00:20:42.800>data <00:20:43.000>Dash

418
00:20:44.300 --> 00:20:44.600
quote.

419
00:20:45.100 --> 00:20:48.400
<00:20:45.100>But <00:20:45.216>to <00:20:45.333>be <00:20:45.449>honest, <00:20:45.566>I <00:20:45.683>have <00:20:45.800>to <00:20:45.916>find <00:20:46.033>the <00:20:46.149>first <00:20:46.266>developer <00:20:46.383>that <00:20:46.500>does

420
00:20:48.400 --> 00:20:51.500
<00:20:48.400>that <00:20:48.866>consequently <00:20:49.333>I <00:20:49.800>don't

421
00:20:51.500 --> 00:20:52.000
but

422
00:20:53.200 --> 00:20:55.300
<00:20:53.200>if <00:20:53.307>you <00:20:53.415>want <00:20:53.523>to <00:20:53.630>do <00:20:53.738>it <00:20:53.846>right <00:20:53.953>make <00:20:54.061>sure <00:20:54.169>you <00:20:54.276>do <00:20:54.384>it <00:20:54.492>like <00:20:54.600>this.

423
00:20:57.200 --> 00:21:00.500
<00:20:57.200>Okay, <00:20:57.375>we <00:20:57.550>have <00:20:57.725>said <00:20:57.900>some <00:20:58.075>things <00:20:58.250>now <00:20:58.425>and <00:20:58.600>we

424
00:21:00.500 --> 00:21:02.500
<00:21:00.500>already <00:21:00.966>saw <00:21:01.433>an <00:21:01.900>event.

425
00:21:04.400 --> 00:21:05.300
<00:21:04.400>But <00:21:04.670>there <00:21:04.940>are <00:21:05.210>more.

426
00:21:05.800 --> 00:21:08.100
<00:21:05.800>So <00:21:05.940>let's <00:21:06.080>look <00:21:06.220>at <00:21:06.360>the <00:21:06.500>life <00:21:06.639>cycle <00:21:06.780>events <00:21:06.919>that <00:21:07.060>we <00:21:07.200>have.

427
00:21:08.900 --> 00:21:09.700
<00:21:08.900>You <00:21:09.140>saw <00:21:09.380>this <00:21:09.620>one?

428
00:21:10.300 --> 00:21:11.900
<00:21:10.300>the <00:21:10.766>attribute <00:21:11.233>change <00:21:11.700>callback

429
00:21:13.100 --> 00:21:16.200
<00:21:13.100>So <00:21:13.240>it's <00:21:13.379>every <00:21:13.520>time <00:21:13.659>you <00:21:13.800>as <00:21:13.939>I <00:21:14.080>said <00:21:14.219>have <00:21:14.360>time <00:21:14.500>if

430
00:21:16.200 --> 00:21:19.300
<00:21:16.200>you <00:21:16.355>add <00:21:16.511>remove <00:21:16.666>or <00:21:16.822>change <00:21:16.977>an <00:21:17.133>attribute, <00:21:17.288>it's <00:21:17.444>called <00:21:17.600>and

431
00:21:19.300 --> 00:21:20.800
<00:21:19.300>it's <00:21:19.570>in <00:21:19.840>combination <00:21:20.110>with <00:21:20.379>this <00:21:20.649>one.

432
00:21:21.500 --> 00:21:24.100
<00:21:21.500>An <00:21:21.733>array <00:21:21.966>of <00:21:22.200>attributes <00:21:22.433>that <00:21:22.666>needs <00:21:22.900>to

433
00:21:24.100 --> 00:21:25.700
<00:21:24.100>be <00:21:24.379>observed <00:21:24.659>observed <00:21:24.939>by <00:21:25.219>the <00:21:25.500>browser.

434
00:21:27.200 --> 00:21:28.600
<00:21:27.200>But <00:21:27.452>we <00:21:27.704>also <00:21:27.956>have <00:21:28.207>connected <00:21:28.460>callback.

435
00:21:29.300 --> 00:21:32.200
<00:21:29.300>And <00:21:29.475>that's <00:21:29.649>something <00:21:29.825>like <00:21:30.000>created <00:21:30.175>in <00:21:30.350>view <00:21:30.524>for <00:21:30.700>instance.

436
00:21:33.400 --> 00:21:36.200
<00:21:33.400>Every <00:21:33.540>time <00:21:33.680>it's <00:21:33.820>added <00:21:33.960>to <00:21:34.100>the <00:21:34.240>Dom <00:21:34.380>this <00:21:34.520>one <00:21:34.660>is <00:21:34.800>called

437
00:21:36.200 --> 00:21:39.200
<00:21:36.200>and <00:21:36.375>the <00:21:36.550>opposite <00:21:36.725>when <00:21:36.900>it's <00:21:37.075>removed <00:21:37.250>from <00:21:37.425>the <00:21:37.600>Dom

438
00:21:39.200 --> 00:21:40.500
<00:21:39.200>we <00:21:39.434>have <00:21:39.668>to <00:21:39.902>disconnect <00:21:40.136>that <00:21:40.370>callback.

439
00:21:41.300 --> 00:21:44.800
<00:21:41.300>And <00:21:41.455>we <00:21:41.611>have <00:21:41.766>a <00:21:41.922>weird <00:21:42.077>one <00:21:42.233>that's <00:21:42.388>called <00:21:42.544>adopted <00:21:42.700>callback.

440
00:21:45.600 --> 00:21:49.500
<00:21:45.600>And <00:21:45.800>that <00:21:46.000>is <00:21:46.199>invoked <00:21:46.399>every <00:21:46.600>time <00:21:46.800>a <00:21:47.000>custom

441
00:21:49.500 --> 00:21:51.100
<00:21:49.500>element <00:21:49.733>is <00:21:49.966>moved <00:21:50.200>to <00:21:50.433>a <00:21:50.666>new <00:21:50.900>document.

442
00:21:52.200 --> 00:21:55.600
<00:21:52.200>I've <00:21:52.300>never <00:21:52.400>seen <00:21:52.500>a <00:21:52.600>use <00:21:52.700>case <00:21:52.800>for <00:21:52.900>it, <00:21:53.000>but <00:21:53.100>I <00:21:53.200>have <00:21:53.300>an <00:21:53.400>example <00:21:53.500>how <00:21:53.600>that

443
00:21:55.600 --> 00:21:56.100
works.

444
00:21:57.500 --> 00:22:00.800
<00:21:57.500>So, <00:21:57.640>let's <00:21:57.780>see <00:21:57.920>here. <00:21:58.060>I <00:21:58.200>have <00:21:58.340>a <00:21:58.480>little <00:21:58.620>example <00:21:58.760>component <00:21:58.900>that

445
00:22:00.800 --> 00:22:03.500
<00:22:00.800>I <00:22:00.975>can <00:22:01.149>add <00:22:01.325>and <00:22:01.500>remove <00:22:01.675>a <00:22:01.850>component <00:22:02.024>and <00:22:02.200>I

446
00:22:03.500 --> 00:22:06.200
<00:22:03.500>can <00:22:03.655>adopt <00:22:03.811>a <00:22:03.966>component <00:22:04.122>and <00:22:04.277>you <00:22:04.433>will <00:22:04.588>see <00:22:04.744>if <00:22:04.900>I

447
00:22:06.200 --> 00:22:10.000
<00:22:06.200>run <00:22:06.355>the <00:22:06.511>video <00:22:06.666>that <00:22:06.822>I <00:22:06.977>also <00:22:07.133>have <00:22:07.288>the <00:22:07.444>attribute <00:22:07.600>changed

448
00:22:09.800 --> 00:22:12.300
<00:22:09.800>callback <00:22:10.033>in <00:22:10.266>there <00:22:10.500>in <00:22:10.733>the <00:22:10.966>HTML <00:22:11.200>itself.

449
00:22:13.300 --> 00:22:14.500
<00:22:13.300>So <00:22:13.659>let's <00:22:14.020>refresh <00:22:14.380>this.

450
00:22:16.300 --> 00:22:19.100
<00:22:16.300>And <00:22:16.416>you <00:22:16.533>can <00:22:16.649>see <00:22:16.766>the <00:22:16.883>attribute <00:22:17.000>change <00:22:17.116>callback <00:22:17.233>is <00:22:17.350>being <00:22:17.466>called <00:22:17.583>with <00:22:17.700>the

451
00:22:19.100 --> 00:22:22.100
<00:22:19.100>attribute <00:22:19.333>name <00:22:19.566>of <00:22:19.800>value <00:22:20.033>old <00:22:20.266>value <00:22:20.500>is

452
00:22:22.100 --> 00:22:25.500
<00:22:22.100>now <00:22:22.216>on <00:22:22.333>the <00:22:22.449>new <00:22:22.566>values. <00:22:22.683>Hello <00:22:22.800>world. <00:22:22.916>Well, <00:22:23.033>let's <00:22:23.149>click <00:22:23.266>on <00:22:23.383>ADD <00:22:23.500>remove.

453
00:22:25.500 --> 00:22:28.600
<00:22:25.500>Now, <00:22:25.700>you <00:22:25.900>can <00:22:26.100>see <00:22:26.300>that <00:22:26.500>it <00:22:26.700>was <00:22:26.900>disconnected

454
00:22:28.600 --> 00:22:31.600
<00:22:28.600>and <00:22:28.833>the <00:22:29.066>connected <00:22:29.300>was <00:22:29.533>at <00:22:29.766>load <00:22:30.000>it's

455
00:22:31.600 --> 00:22:34.200
<00:22:31.600>connected <00:22:31.716>again <00:22:31.833>if <00:22:31.949>I <00:22:32.066>click <00:22:32.183>it <00:22:32.300>and <00:22:32.416>now <00:22:32.533>the <00:22:32.649>weird <00:22:32.766>thing <00:22:32.883>I <00:22:33.000>have

456
00:22:34.200 --> 00:22:36.200
<00:22:34.200>example <00:22:34.550>component <00:22:34.900>in <00:22:35.250>an <00:22:35.600>iframe.

457
00:22:36.900 --> 00:22:39.300
<00:22:36.900>And <00:22:37.075>I <00:22:37.250>just <00:22:37.425>get <00:22:37.600>it <00:22:37.775>to <00:22:37.950>my <00:22:38.125>own <00:22:38.300>document.

458
00:22:41.400 --> 00:22:43.600
<00:22:41.400>Feels <00:22:41.600>like <00:22:41.800>magic, <00:22:42.000>but <00:22:42.200>that's <00:22:42.400>the <00:22:42.600>adopted <00:22:42.800>callback.

459
00:22:44.900 --> 00:22:47.300
<00:22:44.900>So <00:22:45.075>they're <00:22:45.250>not <00:22:45.425>a <00:22:45.600>lot <00:22:45.775>of <00:22:45.950>events <00:22:46.125>to <00:22:46.300>remember.

460
00:22:48.200 --> 00:22:49.900
<00:22:48.200>But <00:22:48.550>they <00:22:48.900>are <00:22:49.250>very <00:22:49.600>powerful.

461
00:22:52.200 --> 00:22:52.500
Okay.

462
00:22:53.500 --> 00:22:56.200
<00:22:53.500>Attributes <00:22:53.700>properties <00:22:53.900>what <00:22:54.100>about <00:22:54.300>slots <00:22:54.500>like <00:22:54.700>you <00:22:54.900>have

463
00:22:56.200 --> 00:22:59.200
<00:22:56.200>for <00:22:56.400>instance <00:22:56.600>in <00:22:56.800>view? <00:22:57.000>I'm <00:22:57.200>mentioning <00:22:57.400>view <00:22:57.600>a

464
00:22:59.200 --> 00:23:00.200
<00:22:59.200>lot <00:22:59.380>because <00:22:59.560>I'm <00:22:59.740>working <00:22:59.920>in <00:23:00.100>view.

465
00:23:00.900 --> 00:23:02.200
<00:23:00.900>So <00:23:01.290>that's <00:23:01.680>my <00:23:02.070>reference.

466
00:23:04.100 --> 00:23:08.100
<00:23:04.100>For <00:23:04.227>instance <00:23:04.354>if <00:23:04.481>we <00:23:04.609>have <00:23:04.736>this <00:23:04.863>with <00:23:04.990>the <00:23:05.118>attribute <00:23:05.245>quote <00:23:05.372>wouldn't <00:23:05.500>it

467
00:23:07.100 --> 00:23:09.000
<00:23:07.100>be <00:23:07.379>easier <00:23:07.659>just <00:23:07.939>to <00:23:08.219>do <00:23:08.500>this?

468
00:23:10.500 --> 00:23:12.700
<00:23:10.500>I <00:23:10.700>just <00:23:10.900>pass <00:23:11.100>it <00:23:11.300>inside <00:23:11.500>of <00:23:11.700>the <00:23:11.900>element.

469
00:23:14.800 --> 00:23:17.700
<00:23:14.800>And <00:23:15.033>in <00:23:15.266>my <00:23:15.500>template <00:23:15.733>in <00:23:15.966>my <00:23:16.200>component.

470
00:23:18.500 --> 00:23:21.700
<00:23:18.500>I <00:23:18.700>need <00:23:18.900>to <00:23:19.100>add <00:23:19.300>slot <00:23:19.500>there. <00:23:19.700>So <00:23:19.900>it's

471
00:23:21.700 --> 00:23:25.100
<00:23:21.700>this <00:23:21.875>is <00:23:22.050>the <00:23:22.225>default <00:23:22.400>slot. <00:23:22.575>It's <00:23:22.750>it's <00:23:22.925>picked <00:23:23.100>up

472
00:23:25.100 --> 00:23:26.100
<00:23:25.100>and <00:23:25.550>placed <00:23:26.000>there.

473
00:23:29.200 --> 00:23:31.300
<00:23:29.200>you <00:23:29.375>can <00:23:29.550>imagine <00:23:29.725>how <00:23:29.900>that <00:23:30.075>looks <00:23:30.250>but <00:23:30.425>just <00:23:30.600>for

474
00:23:32.100 --> 00:23:34.800
<00:23:32.100>demo <00:23:32.274>sake <00:23:32.449>I <00:23:32.625>paste <00:23:32.800>it <00:23:32.975>here <00:23:33.149>and <00:23:33.324>it's <00:23:33.500>there.

475
00:23:37.800 --> 00:23:40.200
<00:23:37.800>But <00:23:37.975>more <00:23:38.149>importantly <00:23:38.325>we <00:23:38.500>also <00:23:38.675>have <00:23:38.850>name <00:23:39.024>slots <00:23:39.200>because

476
00:23:40.200 --> 00:23:44.800
<00:23:40.200>if <00:23:40.400>you <00:23:40.600>want <00:23:40.800>to <00:23:41.000>have <00:23:41.200>more <00:23:41.400>slots <00:23:41.600>to

477
00:23:44.800 --> 00:23:47.300
<00:23:44.800>use <00:23:44.955>more <00:23:45.111>kinds <00:23:45.266>of <00:23:45.422>text <00:23:45.577>you <00:23:45.733>want <00:23:45.888>to <00:23:46.044>add <00:23:46.200>or

478
00:23:47.300 --> 00:23:50.400
<00:23:47.300>something. <00:23:47.500>It's <00:23:47.700>easier <00:23:47.899>to <00:23:48.100>have <00:23:48.300>names <00:23:48.500>for <00:23:48.700>because

479
00:23:50.400 --> 00:23:52.200
<00:23:50.400>you <00:23:50.680>only <00:23:50.960>have <00:23:51.240>one <00:23:51.520>default <00:23:51.800>slot.

480
00:23:53.300 --> 00:23:56.300
<00:23:53.300>So <00:23:53.455>in <00:23:53.611>this <00:23:53.766>case, <00:23:53.922>for <00:23:54.077>instance, <00:23:54.233>I <00:23:54.388>have <00:23:54.544>a <00:23:54.700>slot

481
00:23:56.300 --> 00:23:59.100
<00:23:56.300>called <00:23:56.407>driver <00:23:56.515>because <00:23:56.623>of <00:23:56.730>the <00:23:56.838>layout. <00:23:56.946>I <00:23:57.053>want <00:23:57.161>to <00:23:57.269>have <00:23:57.376>it <00:23:57.484>in <00:23:57.592>a <00:23:57.700>different

482
00:23:59.100 --> 00:24:02.100
<00:23:59.100>place <00:23:59.449>and <00:23:59.800>in <00:24:00.149>inside <00:24:00.500>the

483
00:24:03.100 --> 00:24:06.200
<00:24:03.100>the <00:24:03.216>default <00:24:03.333>slot. <00:24:03.449>I <00:24:03.566>have <00:24:03.683>the <00:24:03.800>text <00:24:03.916>because <00:24:04.033>I <00:24:04.149>know <00:24:04.266>I <00:24:04.383>kind <00:24:04.500>of

484
00:24:06.200 --> 00:24:09.300
<00:24:06.200>place <00:24:06.340>it <00:24:06.480>there <00:24:06.620>but <00:24:06.760>also <00:24:06.900>added <00:24:07.040>an <00:24:07.180>attribute <00:24:07.320>here <00:24:07.460>called <00:24:07.600>image.

485
00:24:10.700 --> 00:24:13.200
<00:24:10.700>To <00:24:10.980>put <00:24:11.260>it <00:24:11.540>in <00:24:11.820>my <00:24:12.100>component.

486
00:24:14.300 --> 00:24:17.200
<00:24:14.300>And <00:24:14.440>this <00:24:14.580>is <00:24:14.720>how <00:24:14.860>the <00:24:15.000>template <00:24:15.139>looks <00:24:15.280>inside <00:24:15.419>of <00:24:15.560>my <00:24:15.700>component.

487
00:24:18.200 --> 00:24:21.700
<00:24:18.200>I <00:24:18.375>have <00:24:18.550>a <00:24:18.725>diff <00:24:18.900>that's <00:24:19.075>called <00:24:19.250>card <00:24:19.425>with <00:24:19.600>an

488
00:24:21.700 --> 00:24:24.200
<00:24:21.700>image <00:24:21.933>then <00:24:22.166>an <00:24:22.400>H2 <00:24:22.633>with <00:24:22.866>the <00:24:23.100>name

489
00:24:24.200 --> 00:24:25.900
<00:24:24.200>of <00:24:24.480>the <00:24:24.760>drive <00:24:25.040>in <00:24:25.320>this <00:24:25.600>case.

490
00:24:26.600 --> 00:24:30.000
<00:24:26.600>And <00:24:26.727>you <00:24:26.854>can <00:24:26.981>see <00:24:27.109>a <00:24:27.236>Target <00:24:27.363>this <00:24:27.490>slot <00:24:27.618>with <00:24:27.745>name <00:24:27.872>is <00:24:28.000>so

491
00:24:29.200 --> 00:24:32.300
<00:24:29.200>that <00:24:29.433>reference <00:24:29.666>to <00:24:29.900>slot <00:24:30.133>is <00:24:30.366>in <00:24:30.600>the

492
00:24:32.300 --> 00:24:33.200
HTML.

493
00:24:33.800 --> 00:24:36.500
<00:24:33.800>And <00:24:33.975>then <00:24:34.149>in <00:24:34.325>the <00:24:34.500>paragraph <00:24:34.675>It's <00:24:34.850>the <00:24:35.024>default <00:24:35.200>slot

494
00:24:36.500 --> 00:24:36.600
again.

495
00:24:39.600 --> 00:24:42.100
<00:24:39.600>I <00:24:39.707>have <00:24:39.815>to <00:24:39.923>add <00:24:40.030>this <00:24:40.138>of <00:24:40.246>course <00:24:40.353>a <00:24:40.461>gather <00:24:40.569>and <00:24:40.676>set <00:24:40.784>it <00:24:40.892>for <00:24:41.000>the

496
00:24:42.100 --> 00:24:45.000
<00:24:42.100>image <00:24:42.255>now <00:24:42.411>because <00:24:42.566>that's <00:24:42.722>an <00:24:42.877>attribute <00:24:43.033>but <00:24:43.188>that's <00:24:43.344>the <00:24:43.500>same

497
00:24:45.100 --> 00:24:46.900
<00:24:45.100>way. <00:24:45.333>We <00:24:45.566>did <00:24:45.800>earlier <00:24:46.033>with <00:24:46.266>the <00:24:46.500>quote.

498
00:24:48.700 --> 00:24:49.600
<00:24:48.700>And <00:24:48.862>this <00:24:49.024>is <00:24:49.186>how <00:24:49.348>it <00:24:49.510>looks.

499
00:24:51.300 --> 00:24:54.500
<00:24:51.300>And <00:24:51.427>I <00:24:51.554>can <00:24:51.681>mess <00:24:51.809>around <00:24:51.936>with <00:24:52.063>it. <00:24:52.190>I <00:24:52.318>can <00:24:52.445>change <00:24:52.572>this <00:24:52.700>slot

500
00:24:54.500 --> 00:24:55.800
<00:24:54.500>to <00:24:55.085>his <00:24:55.670>father.

501
00:24:56.900 --> 00:24:58.500
<00:24:56.900>And <00:24:57.600>saying, <00:24:58.300>whoa.

502
00:24:58.900 --> 00:25:00.200
<00:24:58.900>There's <00:24:59.192>a <00:24:59.485>giant <00:24:59.777>lizard <00:25:00.070>there.

503
00:25:02.700 --> 00:25:04.100
<00:25:02.700>So <00:25:02.910>this <00:25:03.120>is <00:25:03.330>the <00:25:03.540>use <00:25:03.750>of <00:25:03.960>slots.

504
00:25:05.200 --> 00:25:08.400
<00:25:05.200>I <00:25:05.316>would <00:25:05.433>recommend <00:25:05.550>to <00:25:05.666>use <00:25:05.783>name <00:25:05.900>slot <00:25:06.016>because <00:25:06.133>then <00:25:06.250>you <00:25:06.366>have <00:25:06.483>more <00:25:06.600>control

505
00:25:08.400 --> 00:25:09.500
<00:25:08.400>where <00:25:08.895>things <00:25:09.390>go.

506
00:25:10.600 --> 00:25:11.800
<00:25:10.600>But <00:25:10.815>you're <00:25:11.032>free <00:25:11.248>to <00:25:11.464>use <00:25:11.679>anything.

507
00:25:13.700 --> 00:25:16.700
<00:25:13.700>All <00:25:13.855>right, <00:25:14.011>we <00:25:14.166>have <00:25:14.322>stuff <00:25:14.477>in <00:25:14.633>there. <00:25:14.788>But <00:25:14.944>what <00:25:15.100>if

508
00:25:16.700 --> 00:25:19.600
<00:25:16.700>we <00:25:16.816>want <00:25:16.933>to <00:25:17.050>get <00:25:17.166>stuff <00:25:17.283>out <00:25:17.400>of <00:25:17.516>there <00:25:17.633>if <00:25:17.750>we <00:25:17.866>do <00:25:17.983>a <00:25:18.100>click

509
00:25:19.600 --> 00:25:22.900
<00:25:19.600>on <00:25:19.755>a <00:25:19.911>button <00:25:20.066>or <00:25:20.222>something? <00:25:20.377>Well, <00:25:20.533>we <00:25:20.688>can <00:25:20.844>easily <00:25:21.000>dispatch

510
00:25:22.900 --> 00:25:23.600
<00:25:22.900>events <00:25:23.215>as <00:25:23.530>well.

511
00:25:24.600 --> 00:25:27.300
<00:25:24.600>And <00:25:24.727>this <00:25:24.854>is <00:25:24.981>the <00:25:25.109>way <00:25:25.236>to <00:25:25.363>do <00:25:25.490>it. <00:25:25.618>We <00:25:25.745>dispatch <00:25:25.872>an <00:25:26.000>event

512
00:25:27.300 --> 00:25:29.800
<00:25:27.300>we <00:25:27.475>create <00:25:27.649>in <00:25:27.825>this <00:25:28.000>case <00:25:28.175>a <00:25:28.350>new <00:25:28.524>custom <00:25:28.700>event.

513
00:25:30.700 --> 00:25:33.300
<00:25:30.700>We <00:25:30.900>gave <00:25:31.100>that <00:25:31.300>even <00:25:31.500>name <00:25:31.700>maybe <00:25:31.900>button <00:25:32.100>click

514
00:25:33.300 --> 00:25:36.300
<00:25:33.300>or <00:25:33.533>whatever <00:25:33.766>and <00:25:34.000>in <00:25:34.233>the <00:25:34.466>options <00:25:34.700>we

515
00:25:36.300 --> 00:25:40.400
<00:25:36.300>have <00:25:36.427>detail <00:25:36.554>with <00:25:36.681>the <00:25:36.809>data. <00:25:36.936>We <00:25:37.063>want <00:25:37.190>to <00:25:37.318>provide <00:25:37.445>to <00:25:37.572>the <00:25:37.700>parent

516
00:25:39.400 --> 00:25:41.400
<00:25:39.400>component <00:25:39.866>that's <00:25:40.333>calling <00:25:40.800>it.

517
00:25:42.500 --> 00:25:45.200
<00:25:42.500>You <00:25:42.616>can <00:25:42.733>also <00:25:42.850>use <00:25:42.966>new <00:25:43.083>just <00:25:43.200>new <00:25:43.316>event <00:25:43.433>if <00:25:43.550>you <00:25:43.666>don't <00:25:43.783>need <00:25:43.900>to

518
00:25:45.200 --> 00:25:46.900
<00:25:45.200>send <00:25:45.433>details, <00:25:45.666>but <00:25:45.900>most <00:25:46.133>of <00:25:46.366>the <00:25:46.600>time.

519
00:25:47.700 --> 00:25:50.300
<00:25:47.700>You <00:25:47.875>need <00:25:48.050>to <00:25:48.225>send <00:25:48.400>something <00:25:48.575>back <00:25:48.750>to <00:25:48.925>the <00:25:49.100>color.

520
00:25:52.800 --> 00:25:55.400
<00:25:52.800>And <00:25:52.975>in <00:25:53.149>the <00:25:53.325>color <00:25:53.500>in <00:25:53.675>in <00:25:53.850>the <00:25:54.024>in <00:25:54.200>the

521
00:25:55.400 --> 00:25:58.200
<00:25:55.400>parents <00:25:55.507>we <00:25:55.615>can <00:25:55.723>say <00:25:55.830>well <00:25:55.938>we <00:25:56.046>add <00:25:56.153>an <00:25:56.261>event <00:25:56.369>listen <00:25:56.476>to <00:25:56.584>that <00:25:56.692>event <00:25:56.800>name.

522
00:25:59.200 --> 00:26:02.100
<00:25:59.200>And <00:25:59.307>we <00:25:59.415>get <00:25:59.523>the <00:25:59.630>event <00:25:59.738>back <00:25:59.846>and <00:25:59.953>we <00:26:00.061>can <00:26:00.169>say <00:26:00.276>well <00:26:00.384>in <00:26:00.492>this <00:26:00.600>case

523
00:26:02.100 --> 00:26:05.200
<00:26:02.100>e <00:26:02.255>dot <00:26:02.411>detail, <00:26:02.566>whatever <00:26:02.722>it <00:26:02.877>is <00:26:03.033>that <00:26:03.188>we're <00:26:03.344>sending <00:26:03.500>back.

524
00:26:07.200 --> 00:26:08.900
<00:26:07.200>Of <00:26:07.375>course, <00:26:07.550>there's <00:26:07.725>a <00:26:07.900>demo <00:26:08.075>for <00:26:08.250>that <00:26:08.425>as <00:26:08.600>well.

525
00:26:11.300 --> 00:26:14.200
<00:26:11.300>And <00:26:11.440>to <00:26:11.580>make <00:26:11.720>it <00:26:11.860>a <00:26:12.000>little <00:26:12.139>bit <00:26:12.280>more <00:26:12.419>interesting <00:26:12.560>of <00:26:12.700>what

526
00:26:14.200 --> 00:26:15.900
<00:26:14.200>well, <00:26:14.550>let's <00:26:14.900>add <00:26:15.250>a <00:26:15.600>map.

527
00:26:17.100 --> 00:26:17.600
<00:26:17.100>for <00:26:17.550>instance

528
00:26:19.300 --> 00:26:19.400
so

529
00:26:20.500 --> 00:26:21.700
<00:26:20.500>this <00:26:20.770>is <00:26:21.040>my <00:26:21.310>example <00:26:21.580>component.

530
00:26:22.900 --> 00:26:25.400
<00:26:22.900>I'm <00:26:23.100>calling <00:26:23.300>a <00:26:23.500>web <00:26:23.700>service <00:26:23.900>that <00:26:24.100>provides <00:26:24.300>me

531
00:26:25.400 --> 00:26:28.500
<00:26:25.400>with <00:26:25.555>all <00:26:25.711>the <00:26:25.866>circuits <00:26:26.022>Max <00:26:26.177>for <00:26:26.333>stepman <00:26:26.488>has <00:26:26.644>driven <00:26:26.800>on

532
00:26:28.500 --> 00:26:29.300
<00:26:28.500>in <00:26:28.860>his <00:26:29.220>career.

533
00:26:31.600 --> 00:26:31.800
and

534
00:26:33.200 --> 00:26:37.200
<00:26:33.200>I <00:26:33.307>want <00:26:33.415>to <00:26:33.523>make <00:26:33.630>sure <00:26:33.738>if <00:26:33.846>you <00:26:33.953>click <00:26:34.061>the <00:26:34.169>button <00:26:34.276>it <00:26:34.384>will <00:26:34.492>dispatch <00:26:34.600>my

535
00:26:36.200 --> 00:26:39.800
<00:26:36.200>click <00:26:36.550>and <00:26:36.900>that <00:26:37.250>dispatch <00:26:37.600>says

536
00:26:39.800 --> 00:26:42.500
<00:26:39.800>well <00:26:40.000>just <00:26:40.200>get <00:26:40.399>the <00:26:40.600>random <00:26:40.800>circuit <00:26:41.000>and <00:26:41.200>send

537
00:26:42.500 --> 00:26:44.900
<00:26:42.500>that <00:26:42.700>back <00:26:42.900>to <00:26:43.100>the <00:26:43.300>web <00:26:43.500>component <00:26:43.700>click <00:26:43.900>event.

538
00:26:45.700 --> 00:26:48.100
<00:26:45.700>So <00:26:45.980>the <00:26:46.260>caller <00:26:46.540>can <00:26:46.820>use <00:26:47.100>it

539
00:26:48.100 --> 00:26:49.400
<00:26:48.100>on <00:26:48.392>its <00:26:48.685>on <00:26:48.977>this <00:26:49.270>page.

540
00:26:50.600 --> 00:26:51.200
<00:26:50.600>and <00:26:50.780>this <00:26:50.960>is <00:26:51.140>the

541
00:26:52.500 --> 00:26:55.500
<00:26:52.500>say <00:26:52.700>the <00:26:52.900>JavaScript <00:26:53.100>that's <00:26:53.300>using <00:26:53.500>by <00:26:53.700>the <00:26:53.900>HTML

542
00:26:55.500 --> 00:26:55.800
page.

543
00:26:56.600 --> 00:26:59.200
<00:26:56.600>A <00:26:56.727>lot <00:26:56.854>of <00:26:56.981>boilerplate <00:26:57.109>for <00:26:57.236>setting <00:26:57.363>up <00:26:57.490>the <00:26:57.618>map <00:26:57.745>but <00:26:57.872>the <00:26:58.000>most

544
00:26:59.200 --> 00:27:02.200
<00:26:59.200>important <00:26:59.340>thing <00:26:59.480>is <00:26:59.620>it <00:26:59.760>has <00:26:59.900>an <00:27:00.040>event <00:27:00.180>listener <00:27:00.320>to <00:27:00.460>the <00:27:00.600>web

545
00:27:02.200 --> 00:27:02.800
<00:27:02.200>component <00:27:02.740>click.

546
00:27:04.700 --> 00:27:07.600
<00:27:04.700>I <00:27:04.855>log <00:27:05.011>the <00:27:05.166>data. <00:27:05.322>I'm <00:27:05.477>getting <00:27:05.633>I'm <00:27:05.788>getting <00:27:05.944>an <00:27:06.100>object.

547
00:27:08.400 --> 00:27:11.600
<00:27:08.400>and <00:27:08.555>that <00:27:08.711>object <00:27:08.866>I'm <00:27:09.022>using <00:27:09.177>to <00:27:09.333>set <00:27:09.488>the <00:27:09.644>coordinates <00:27:09.800>for

548
00:27:11.600 --> 00:27:11.800
the

549
00:27:12.800 --> 00:27:15.200
<00:27:12.800>for <00:27:13.080>the <00:27:13.360>map <00:27:13.639>and <00:27:13.919>some <00:27:14.200>extra

550
00:27:15.200 --> 00:27:15.400
information.

551
00:27:16.500 --> 00:27:17.700
<00:27:16.500>So, <00:27:16.716>let's <00:27:16.932>see <00:27:17.148>how <00:27:17.364>that <00:27:17.580>works.

552
00:27:20.200 --> 00:27:23.500
<00:27:20.200>I <00:27:20.400>click <00:27:20.600>the <00:27:20.800>button <00:27:21.000>and <00:27:21.200>there <00:27:21.400>I <00:27:21.600>get

553
00:27:23.500 --> 00:27:26.300
<00:27:23.500>an <00:27:23.700>object <00:27:23.900>back <00:27:24.100>saying <00:27:24.300>well, <00:27:24.500>this <00:27:24.700>is <00:27:24.900>Bahrain.

554
00:27:27.100 --> 00:27:30.600
<00:27:27.100>With <00:27:27.240>some <00:27:27.379>information <00:27:27.520>about <00:27:27.659>the <00:27:27.800>letter <00:27:27.939>to <00:27:28.080>the <00:27:28.219>longitude <00:27:28.360>and <00:27:28.500>the

555
00:27:30.600 --> 00:27:33.000
<00:27:30.600>country <00:27:30.716>and <00:27:30.833>stuff <00:27:30.949>like <00:27:31.066>that <00:27:31.183>and <00:27:31.300>I <00:27:31.416>can <00:27:31.533>put <00:27:31.649>it <00:27:31.766>on <00:27:31.883>the <00:27:32.000>screen

556
00:27:33.200 --> 00:27:33.400
<00:27:33.200>like <00:27:33.380>that.

557
00:27:35.200 --> 00:27:38.500
<00:27:35.200>If <00:27:35.300>a <00:27:35.400>dispatch <00:27:35.500>it <00:27:35.600>again, <00:27:35.700>just <00:27:35.800>give <00:27:35.900>me <00:27:36.000>a <00:27:36.100>random <00:27:36.200>one. <00:27:36.300>We're <00:27:36.400>going <00:27:36.500>to <00:27:36.600>Qatar.

558
00:27:39.300 --> 00:27:42.500
<00:27:39.300>At <00:27:39.440>especially <00:27:39.580>again <00:27:39.720>and <00:27:39.860>we're <00:27:40.000>going <00:27:40.139>to <00:27:40.280>my <00:27:40.419>favorite <00:27:40.560>one <00:27:40.700>in

559
00:27:42.500 --> 00:27:43.900
<00:27:42.500>the <00:27:43.130>Netherlands <00:27:43.760>zenfort.

560
00:27:44.600 --> 00:27:46.400
<00:27:44.600>With <00:27:44.879>all <00:27:45.159>the <00:27:45.439>data <00:27:45.719>as <00:27:46.000>well.

561
00:27:47.600 --> 00:27:47.900
Great.

562
00:27:48.700 --> 00:27:49.400
<00:27:48.700>We <00:27:49.015>have <00:27:49.330>events.

563
00:27:50.200 --> 00:27:53.700
<00:27:50.200>What <00:27:50.340>about <00:27:50.480>events <00:27:50.620>between <00:27:50.760>components? <00:27:50.900>That <00:27:51.040>would <00:27:51.180>be <00:27:51.320>even <00:27:51.460>nicer, <00:27:51.600>right?

564
00:27:54.800 --> 00:27:56.800
<00:27:54.800>so <00:27:55.033>let's <00:27:55.266>look <00:27:55.500>at <00:27:55.733>an <00:27:55.966>example <00:27:56.200>like

565
00:27:58.600 --> 00:28:00.600
<00:27:58.600>a <00:27:59.066>list <00:27:59.533>detail <00:28:00.000>one

566
00:28:01.600 --> 00:28:04.500
<00:28:01.600>So <00:28:01.755>I'm <00:28:01.911>compiling <00:28:02.066>a <00:28:02.222>driver <00:28:02.377>list <00:28:02.533>with <00:28:02.688>all <00:28:02.844>the <00:28:03.000>drivers

567
00:28:04.500 --> 00:28:08.300
<00:28:04.500>of <00:28:04.700>2021. <00:28:04.900>I <00:28:05.100>will <00:28:05.300>explain <00:28:05.500>later <00:28:05.700>why <00:28:05.900>221

568
00:28:07.300 --> 00:28:10.100
<00:28:07.300>and <00:28:07.649>if <00:28:08.000>you <00:28:08.350>select <00:28:08.700>a

569
00:28:10.100 --> 00:28:10.600
driver

570
00:28:11.400 --> 00:28:13.300
<00:28:11.400>we <00:28:11.633>passed <00:28:11.866>the <00:28:12.100>data <00:28:12.333>to <00:28:12.566>detail <00:28:12.800>page.

571
00:28:14.500 --> 00:28:17.500
<00:28:14.500>So <00:28:14.675>I've <00:28:14.850>defined <00:28:15.025>two <00:28:15.200>custom <00:28:15.375>elements <00:28:15.550>here <00:28:15.725>drive. <00:28:15.900>Listen

572
00:28:17.500 --> 00:28:18.100
<00:28:17.500>Drive <00:28:18.040>detail.

573
00:28:19.300 --> 00:28:19.900
<00:28:19.300>I <00:28:19.840>have

574
00:28:21.300 --> 00:28:22.800
<00:28:21.300>some <00:28:22.649>JavaScript

575
00:28:23.600 --> 00:28:26.400
<00:28:23.600>that <00:28:23.774>make <00:28:23.949>sure <00:28:24.125>that <00:28:24.300>if <00:28:24.475>a <00:28:24.649>driver <00:28:24.824>is <00:28:25.000>selected,

576
00:28:26.400 --> 00:28:29.600
<00:28:26.400>it's <00:28:26.600>listens <00:28:26.800>to <00:28:27.000>the <00:28:27.200>select <00:28:27.400>driver <00:28:27.600>event <00:28:27.800>and

577
00:28:29.600 --> 00:28:32.300
<00:28:29.600>it's <00:28:29.879>passed <00:28:30.159>on <00:28:30.439>to <00:28:30.719>the <00:28:31.000>detail

578
00:28:32.300 --> 00:28:34.000
<00:28:32.300>components <00:28:32.580>so <00:28:32.860>we <00:28:33.139>can <00:28:33.419>display <00:28:33.700>there.

579
00:28:34.900 --> 00:28:37.300
<00:28:34.900>And <00:28:35.133>lastly, <00:28:35.366>I'm <00:28:35.600>just <00:28:35.833>fetching <00:28:36.066>an <00:28:36.300>API

580
00:28:37.300 --> 00:28:39.100
<00:28:37.300>again <00:28:37.649>to <00:28:38.000>get <00:28:38.350>the <00:28:38.700>drivers.

581
00:28:40.100 --> 00:28:40.400
<00:28:40.100>and <00:28:40.370>I

582
00:28:41.400 --> 00:28:45.100
<00:28:41.400>the <00:28:41.540>list <00:28:41.680>or <00:28:41.820>the <00:28:41.960>objects <00:28:42.100>with <00:28:42.240>all <00:28:42.380>the <00:28:42.520>drives <00:28:42.660>the <00:28:42.800>service.

583
00:28:44.100 --> 00:28:47.400
<00:28:44.100>I'm <00:28:44.379>giving <00:28:44.659>to <00:28:44.939>my <00:28:45.219>list <00:28:45.500>component.

584
00:28:48.400 --> 00:28:51.600
<00:28:48.400>But <00:28:48.575>I'm <00:28:48.750>setting <00:28:48.925>the <00:28:49.100>first <00:28:49.275>one <00:28:49.450>to <00:28:49.625>the <00:28:49.800>the

585
00:28:51.600 --> 00:28:52.200
<00:28:51.600>detail <00:28:52.140>already.

586
00:28:54.900 --> 00:28:58.200
<00:28:54.900>The <00:28:55.180>driver <00:28:55.460>list <00:28:55.740>is <00:28:56.020>actually <00:28:56.300>just

587
00:28:57.200 --> 00:28:59.800
<00:28:57.200>a <00:28:58.600>select.

588
00:29:00.700 --> 00:29:02.500
<00:29:00.700>And <00:29:00.933>the <00:29:01.166>data <00:29:01.400>I'm <00:29:01.633>getting <00:29:01.866>fed <00:29:02.100>by.

589
00:29:04.200 --> 00:29:07.600
<00:29:04.200>The <00:29:04.480>instantiation <00:29:04.760>of <00:29:05.040>it. <00:29:05.320>I'm <00:29:05.600>I'm

590
00:29:07.600 --> 00:29:10.300
<00:29:07.600>creating <00:29:07.727>options <00:29:07.854>and <00:29:07.981>putting <00:29:08.109>them <00:29:08.236>in <00:29:08.363>the <00:29:08.490>list. <00:29:08.618>That's <00:29:08.745>the <00:29:08.872>more <00:29:09.000>more

591
00:29:10.300 --> 00:29:13.500
<00:29:10.300>isn't <00:29:10.533>there <00:29:10.766>and <00:29:11.000>when <00:29:11.233>it's <00:29:11.466>when <00:29:11.700>you

592
00:29:13.500 --> 00:29:16.500
<00:29:13.500>select <00:29:13.733>something <00:29:13.966>it <00:29:14.200>will <00:29:14.433>change <00:29:14.666>and <00:29:14.900>that

593
00:29:16.500 --> 00:29:19.300
<00:29:16.500>we <00:29:16.640>will <00:29:16.780>send <00:29:16.920>back <00:29:17.060>we <00:29:17.200>dispatch <00:29:17.340>a <00:29:17.480>new <00:29:17.620>event <00:29:17.760>called <00:29:17.900>select

594
00:29:19.300 --> 00:29:21.000
<00:29:19.300>driver. <00:29:19.533>So <00:29:19.766>the <00:29:20.000>details <00:29:20.233>can <00:29:20.466>use <00:29:20.700>it.

595
00:29:22.600 --> 00:29:23.500
<00:29:22.600>This <00:29:22.870>is <00:29:23.139>the <00:29:23.410>details.

596
00:29:26.300 --> 00:29:29.100
<00:29:26.300>Also <00:29:26.440>a <00:29:26.580>getter <00:29:26.720>in <00:29:26.860>the <00:29:27.000>setup <00:29:27.139>because <00:29:27.280>we're <00:29:27.419>getting <00:29:27.560>a <00:29:27.700>driver.

597
00:29:31.700 --> 00:29:34.500
<00:29:31.700>And <00:29:31.933>I <00:29:32.166>have <00:29:32.400>a <00:29:32.633>little <00:29:32.866>template <00:29:33.100>saying

598
00:29:34.500 --> 00:29:37.500
<00:29:34.500>well, <00:29:34.627>this <00:29:34.754>is <00:29:34.881>how <00:29:35.009>it <00:29:35.136>should <00:29:35.263>look <00:29:35.390>in <00:29:35.518>this <00:29:35.645>case. <00:29:35.772>I'm <00:29:35.900>just

599
00:29:37.500 --> 00:29:40.400
<00:29:37.500>writing <00:29:37.640>it <00:29:37.780>directly <00:29:37.920>in <00:29:38.060>the <00:29:38.200>shadow <00:29:38.340>route. <00:29:38.480>Don't <00:29:38.620>have <00:29:38.760>a <00:29:38.900>separate

600
00:29:40.400 --> 00:29:41.000
<00:29:40.400>template <00:29:40.670>for <00:29:40.940>it.

601
00:29:41.700 --> 00:29:44.800
<00:29:41.700>It's <00:29:41.840>fine. <00:29:41.980>If <00:29:42.120>it's <00:29:42.260>small <00:29:42.400>if <00:29:42.540>it's <00:29:42.680>getting <00:29:42.820>bigger, <00:29:42.960>you <00:29:43.100>probably

602
00:29:44.800 --> 00:29:46.000
<00:29:44.800>should <00:29:45.159>use <00:29:45.520>a <00:29:45.880>template.

603
00:29:47.600 --> 00:29:50.400
<00:29:47.600>All <00:29:47.727>right. <00:29:47.854>Let's <00:29:47.981>see <00:29:48.109>how <00:29:48.236>that <00:29:48.363>looks. <00:29:48.490>So <00:29:48.618>the <00:29:48.745>first <00:29:48.872>one <00:29:49.000>that's

604
00:29:50.400 --> 00:29:50.800
there.

605
00:29:51.800 --> 00:29:53.300
<00:29:51.800>Is <00:29:52.475>Fernando <00:29:53.149>Alonso?

606
00:29:54.200 --> 00:29:55.400
<00:29:54.200>So <00:29:54.470>let's <00:29:54.740>select <00:29:55.010>another <00:29:55.280>one.

607
00:29:56.700 --> 00:29:59.400
<00:29:56.700>For <00:29:56.900>instance. <00:29:57.100>Let's <00:29:57.300>like <00:29:57.500>Sergio <00:29:57.700>Perez <00:29:57.900>number <00:29:58.100>11.

608
00:30:01.300 --> 00:30:04.200
<00:30:01.300>The <00:30:01.533>next <00:30:01.766>one <00:30:02.000>Sonora <00:30:02.233>22 <00:30:02.466>you <00:30:02.700>see

609
00:30:04.200 --> 00:30:07.500
<00:30:04.200>what <00:30:04.375>is <00:30:04.550>going <00:30:04.725>Max <00:30:04.900>33. <00:30:05.075>Well, <00:30:05.250>it's <00:30:05.425>one <00:30:05.600>now,

610
00:30:07.500 --> 00:30:08.700
<00:30:07.500>but <00:30:07.716>it <00:30:07.932>used <00:30:08.148>to <00:30:08.364>be <00:30:08.580>33.

611
00:30:09.500 --> 00:30:11.700
<00:30:09.500>Lewis <00:30:09.850>44, <00:30:10.200>I <00:30:10.550>love <00:30:10.900>this

612
00:30:12.800 --> 00:30:14.200
<00:30:12.800>science <00:30:14.060>55

613
00:30:16.200 --> 00:30:17.300
<00:30:16.200>And <00:30:16.530>anybody <00:30:16.860>knows <00:30:17.190>66?

614
00:30:18.200 --> 00:30:20.800
<00:30:18.200>No, <00:30:18.433>it's <00:30:18.666>not <00:30:18.900>there. <00:30:19.133>So <00:30:19.366>77 <00:30:19.600>filetry.

615
00:30:22.800 --> 00:30:25.900
<00:30:22.800>88 <00:30:23.149>we <00:30:23.500>have <00:30:23.850>Robert <00:30:24.200>kobicha.

616
00:30:26.800 --> 00:30:29.000
<00:30:26.800>And <00:30:26.955>we <00:30:27.111>have <00:30:27.266>99 <00:30:27.422>as <00:30:27.577>well <00:30:27.733>last <00:30:27.888>year <00:30:28.044>that <00:30:28.200>was.

617
00:30:29.700 --> 00:30:31.400
<00:30:29.700>Antonio <00:30:31.100>giovannatsi

618
00:30:32.200 --> 00:30:34.500
<00:30:32.200>I <00:30:32.400>love <00:30:32.600>this <00:30:32.800>numbers <00:30:33.000>growing <00:30:33.200>up <00:30:33.400>and <00:30:33.600>up.

619
00:30:39.100 --> 00:30:40.300
<00:30:39.100>one <00:30:39.460>fair <00:30:39.820>warning <00:30:40.179>though

620
00:30:41.200 --> 00:30:43.400
<00:30:41.200>if <00:30:41.400>you've <00:30:41.600>worked <00:30:41.800>with <00:30:42.000>JavaScript, <00:30:42.200>you <00:30:42.400>know <00:30:42.600>that.

621
00:30:44.400 --> 00:30:45.400
<00:30:44.400>It <00:30:44.700>might <00:30:45.000>feel <00:30:45.300>sometimes.

622
00:30:48.100 --> 00:30:51.300
<00:30:48.100>And <00:30:48.216>you <00:30:48.333>get <00:30:48.449>very <00:30:48.566>angry <00:30:48.683>about <00:30:48.800>it <00:30:48.916>and <00:30:49.033>kicking <00:30:49.149>kicking <00:30:49.266>your <00:30:49.383>laptop <00:30:49.500>or

623
00:30:51.300 --> 00:30:53.200
<00:30:51.300>in <00:30:51.580>this <00:30:51.860>case <00:30:52.139>your <00:30:52.419>blown <00:30:52.700>tire.

624
00:30:54.900 --> 00:30:57.500
<00:30:54.900>So <00:30:55.100>it <00:30:55.300>might <00:30:55.500>be <00:30:55.700>useful <00:30:55.900>to <00:30:56.100>make <00:30:56.300>sure.

625
00:30:58.600 --> 00:31:01.200
<00:30:58.600>that <00:30:58.833>the <00:30:59.066>user <00:30:59.300>see <00:30:59.533>something <00:30:59.766>when <00:31:00.000>you

626
00:31:01.200 --> 00:31:04.400
<00:31:01.200>JavaScript <00:31:01.400>is <00:31:01.600>failing <00:31:01.800>because <00:31:02.000>if <00:31:02.200>your <00:31:02.400>web <00:31:02.600>component

627
00:31:04.400 --> 00:31:07.100
<00:31:04.400>fails, <00:31:04.555>this <00:31:04.711>is <00:31:04.866>what <00:31:05.022>user <00:31:05.177>will <00:31:05.333>see <00:31:05.488>that's <00:31:05.644>not <00:31:05.800>really

628
00:31:07.100 --> 00:31:10.300
<00:31:07.100>useful <00:31:07.255>right <00:31:07.411>and <00:31:07.566>it <00:31:07.722>could <00:31:07.877>be <00:31:08.033>your <00:31:08.188>problem <00:31:08.344>you <00:31:08.500>could

629
00:31:10.300 --> 00:31:10.400
be

630
00:31:12.400 --> 00:31:15.200
<00:31:12.400>Because <00:31:12.575>of <00:31:12.750>a <00:31:12.925>third <00:31:13.100>party <00:31:13.275>JavaScript <00:31:13.450>that's <00:31:13.625>also <00:31:13.800>running

631
00:31:15.200 --> 00:31:15.400
there.

632
00:31:16.300 --> 00:31:19.100
<00:31:16.300>But <00:31:16.427>make <00:31:16.554>sure <00:31:16.681>that <00:31:16.809>you <00:31:16.936>use <00:31:17.063>a <00:31:17.190>know <00:31:17.318>something <00:31:17.445>should <00:31:17.572>be <00:31:17.700>there.

633
00:31:19.900 --> 00:31:20.800
<00:31:19.900>So <00:31:20.170>I <00:31:20.440>would <00:31:20.710>say

634
00:31:22.600 --> 00:31:25.800
<00:31:22.600>for <00:31:22.833>instance. <00:31:23.066>Let's <00:31:23.300>add <00:31:23.533>this <00:31:23.766>to <00:31:24.000>our

635
00:31:25.800 --> 00:31:27.000
slot.

636
00:31:27.600 --> 00:31:30.100
<00:31:27.600>Well, <00:31:27.740>not <00:31:27.879>slot <00:31:28.020>really <00:31:28.159>if <00:31:28.300>you're <00:31:28.439>not <00:31:28.580>using <00:31:28.719>a <00:31:28.860>slot <00:31:29.000>but

637
00:31:31.100 --> 00:31:34.500
<00:31:31.100>You <00:31:31.274>know <00:31:31.449>if <00:31:31.625>driver <00:31:31.800>code <00:31:31.975>is <00:31:32.149>not <00:31:32.324>recognized <00:31:32.500>by

638
00:31:34.500 --> 00:31:37.100
<00:31:34.500>the <00:31:34.675>browser <00:31:34.850>because <00:31:35.025>of <00:31:35.200>a <00:31:35.375>JavaScript <00:31:35.550>error. <00:31:35.725>It <00:31:35.900>will

639
00:31:37.100 --> 00:31:38.400
<00:31:37.100>print <00:31:37.685>this <00:31:38.270>message.

640
00:31:40.900 --> 00:31:43.500
<00:31:40.900>But <00:31:41.040>if <00:31:41.180>you're <00:31:41.320>using <00:31:41.460>slots <00:31:41.600>and <00:31:41.740>this <00:31:41.880>is <00:31:42.020>your <00:31:42.160>default <00:31:42.300>slot.

641
00:31:43.900 --> 00:31:46.500
<00:31:43.900>You <00:31:44.133>have <00:31:44.366>a <00:31:44.600>problem <00:31:44.833>so <00:31:45.066>good <00:31:45.300>old

642
00:31:46.500 --> 00:31:48.600
<00:31:46.500>no <00:31:46.700>script <00:31:46.900>I <00:31:47.100>would <00:31:47.300>use <00:31:47.500>the <00:31:47.700>for <00:31:47.900>that.

643
00:31:49.500 --> 00:31:51.700
<00:31:49.500>This <00:31:49.780>is <00:31:50.060>only <00:31:50.340>triggered <00:31:50.620>if <00:31:50.900>JavaScript.

644
00:31:52.900 --> 00:31:55.400
<00:31:52.900>Is <00:31:53.366>for <00:31:53.833>instance <00:31:54.300>disabled.

645
00:31:58.500 --> 00:31:58.800
Okay.

646
00:32:03.200 --> 00:32:06.400
<00:32:03.200>The <00:32:03.327>last <00:32:03.454>10 <00:32:03.581>minutes <00:32:03.709>I <00:32:03.836>want <00:32:03.963>to <00:32:04.090>show <00:32:04.218>you <00:32:04.345>an <00:32:04.472>implementation <00:32:04.600>of

647
00:32:06.400 --> 00:32:08.000
<00:32:06.400>my <00:32:07.100>video <00:32:07.800>components.

648
00:32:08.700 --> 00:32:09.200
into

649
00:32:11.600 --> 00:32:12.900
<00:32:11.600>Frameworks <00:32:12.185>like <00:32:12.770>react

650
00:32:13.600 --> 00:32:16.200
<00:32:13.600>angular <00:32:14.066>View <00:32:14.533>and <00:32:15.000>swell

651
00:32:17.200 --> 00:32:20.500
<00:32:17.200>I <00:32:17.307>never <00:32:17.415>know <00:32:17.523>how <00:32:17.630>to <00:32:17.738>pronounce <00:32:17.846>it <00:32:17.953>swelz <00:32:18.061>felty. <00:32:18.169>I <00:32:18.276>don't <00:32:18.384>know <00:32:18.492>it's <00:32:18.600>felt.

652
00:32:21.600 --> 00:32:25.000
<00:32:21.600>So <00:32:21.774>if <00:32:21.949>you <00:32:22.125>ever <00:32:22.300>had <00:32:22.475>to <00:32:22.649>include <00:32:22.824>some <00:32:23.000>YouTube

653
00:32:24.300 --> 00:32:27.000
<00:32:24.300>or <00:32:24.580>Vimeo <00:32:24.860>videos <00:32:25.139>in <00:32:25.419>a <00:32:25.700>website.

654
00:32:27.900 --> 00:32:28.900
<00:32:27.900>You <00:32:28.200>go <00:32:28.500>to <00:32:28.800>YouTube.

655
00:32:29.800 --> 00:32:32.900
<00:32:29.800>You <00:32:30.080>select <00:32:30.360>the <00:32:30.639>the <00:32:30.919>embedded <00:32:31.200>code

656
00:32:32.900 --> 00:32:35.100
<00:32:32.900>to <00:32:33.100>have <00:32:33.300>it <00:32:33.500>in <00:32:33.700>your <00:32:33.900>in <00:32:34.100>your <00:32:34.300>website

657
00:32:35.100 --> 00:32:37.200
<00:32:35.100>and <00:32:35.300>you <00:32:35.500>end <00:32:35.699>up <00:32:35.899>with <00:32:36.100>crap <00:32:36.300>like <00:32:36.500>this.

658
00:32:39.200 --> 00:32:42.000
<00:32:39.200>Even <00:32:39.400>worse <00:32:39.600>if <00:32:39.800>you <00:32:40.000>are <00:32:40.200>having <00:32:40.400>a <00:32:40.600>CMS.

659
00:32:43.300 --> 00:32:46.300
<00:32:43.300>And <00:32:43.475>they <00:32:43.649>want <00:32:43.825>to <00:32:44.000>include <00:32:44.175>a <00:32:44.350>video <00:32:44.524>they <00:32:44.700>have

660
00:32:46.300 --> 00:32:46.700
<00:32:46.300>to <00:32:46.480>do <00:32:46.660>this.

661
00:32:47.500 --> 00:32:50.200
<00:32:47.500>And <00:32:47.675>nine <00:32:47.850>out <00:32:48.025>of <00:32:48.200>10 <00:32:48.375>times. <00:32:48.550>They <00:32:48.725>mess <00:32:48.900>it

662
00:32:50.200 --> 00:32:50.300
up.

663
00:32:51.100 --> 00:32:54.600
<00:32:51.100>The <00:32:51.274>last <00:32:51.449>one <00:32:51.625>is <00:32:51.800>the <00:32:51.975>HTML <00:32:52.149>video <00:32:52.324>tech <00:32:52.500>itself.

664
00:32:54.600 --> 00:32:57.300
<00:32:54.600>It's <00:32:55.066>easier, <00:32:55.533>but <00:32:56.000>it's

665
00:32:57.300 --> 00:32:58.600
<00:32:57.300>still <00:32:57.885>error <00:32:58.469>Pro.

666
00:33:00.000 --> 00:33:00.200
so

667
00:33:01.100 --> 00:33:04.400
<00:33:01.100>wouldn't <00:33:01.227>it <00:33:01.354>be <00:33:01.481>easier <00:33:01.609>to <00:33:01.736>do <00:33:01.863>something <00:33:01.990>like <00:33:02.118>this? <00:33:02.245>Just <00:33:02.372>have <00:33:02.500>a

668
00:33:04.400 --> 00:33:05.100
<00:33:04.400>video <00:33:05.030>component?

669
00:33:06.200 --> 00:33:09.400
<00:33:06.200>And <00:33:06.375>you <00:33:06.550>add <00:33:06.725>YouTube <00:33:06.900>or <00:33:07.075>female <00:33:07.250>or <00:33:07.425>HTML5 <00:33:07.600>to

670
00:33:09.400 --> 00:33:10.900
<00:33:09.400>it? <00:33:09.670>And <00:33:09.940>it <00:33:10.210>can <00:33:10.480>be <00:33:10.750>shown?

671
00:33:12.300 --> 00:33:12.900
<00:33:12.300>That's <00:33:12.480>what <00:33:12.660>I <00:33:12.840>did.

672
00:33:14.200 --> 00:33:17.500
<00:33:14.200>So <00:33:14.433>I <00:33:14.666>created <00:33:14.900>this <00:33:15.133>video <00:33:15.366>component <00:33:15.600>element.

673
00:33:18.400 --> 00:33:21.400
<00:33:18.400>And <00:33:18.680>just <00:33:18.960>lazily <00:33:19.240>just <00:33:19.520>copied <00:33:19.800>the

674
00:33:21.400 --> 00:33:23.900
<00:33:21.400>data <00:33:21.750>from <00:33:22.100>female <00:33:22.450>and <00:33:22.800>YouTube.

675
00:33:24.700 --> 00:33:27.400
<00:33:24.700>but <00:33:24.980>make <00:33:25.260>sure <00:33:25.540>that <00:33:25.820>it <00:33:26.100>will

676
00:33:27.400 --> 00:33:30.900
<00:33:27.400>listen <00:33:27.633>to <00:33:27.866>the <00:33:28.100>attributes <00:33:28.333>YouTube <00:33:28.566>female <00:33:28.800>and

677
00:33:30.900 --> 00:33:33.300
<00:33:30.900>HTML5 <00:33:31.133>and <00:33:31.366>then <00:33:31.600>replacing <00:33:31.833>it <00:33:32.066>in <00:33:32.300>the

678
00:33:33.300 --> 00:33:34.400
<00:33:33.300>settings <00:33:33.547>and <00:33:33.795>they <00:33:34.042>get <00:33:34.290>us

679
00:33:38.200 --> 00:33:41.300
<00:33:38.200>Here <00:33:38.327>you <00:33:38.454>can <00:33:38.581>see <00:33:38.709>attribute <00:33:38.836>change <00:33:38.963>callback. <00:33:39.090>Like <00:33:39.218>we <00:33:39.345>saw <00:33:39.472>before <00:33:39.600>we

680
00:33:41.300 --> 00:33:44.500
<00:33:41.300>listening <00:33:41.416>to <00:33:41.533>this <00:33:41.649>and <00:33:41.766>if <00:33:41.883>we <00:33:42.000>get <00:33:42.116>one <00:33:42.233>of <00:33:42.350>those <00:33:42.466>we <00:33:42.583>set <00:33:42.700>it.

681
00:33:45.200 --> 00:33:48.200
<00:33:45.200>It's <00:33:45.375>very <00:33:45.550>basic <00:33:45.725>and <00:33:45.900>plain <00:33:46.075>and <00:33:46.250>simple <00:33:46.425>component, <00:33:46.600>but

682
00:33:48.200 --> 00:33:50.000
<00:33:48.200>it <00:33:48.550>will <00:33:48.900>serve <00:33:49.250>as <00:33:49.600>purpose.

683
00:33:51.300 --> 00:33:53.400
<00:33:51.300>And <00:33:51.427>it <00:33:51.554>will <00:33:51.681>look <00:33:51.809>like <00:33:51.936>this. <00:33:52.063>So <00:33:52.190>the <00:33:52.318>top <00:33:52.445>one <00:33:52.572>is <00:33:52.700>YouTube.

684
00:33:54.300 --> 00:33:56.400
<00:33:54.300>The <00:33:54.475>second <00:33:54.649>one <00:33:54.825>is <00:33:55.000>Vimeo <00:33:55.175>and <00:33:55.350>the <00:33:55.524>last <00:33:55.700>one.

685
00:33:57.300 --> 00:33:57.600
is

686
00:33:59.700 --> 00:34:01.600
<00:33:59.700>the <00:34:00.166>HTML5 <00:34:00.633>video <00:34:01.100>tech

687
00:34:03.200 --> 00:34:06.100
<00:34:03.200>keep <00:34:03.316>in <00:34:03.433>mind <00:34:03.550>if <00:34:03.666>you're <00:34:03.783>using <00:34:03.900>the <00:34:04.016>HTML5 <00:34:04.133>video <00:34:04.250>tech <00:34:04.366>you <00:34:04.483>need <00:34:04.600>to

688
00:34:06.100 --> 00:34:09.400
<00:34:06.100>either <00:34:06.379>include <00:34:06.659>the <00:34:06.939>video <00:34:07.219>on <00:34:07.500>your

689
00:34:09.400 --> 00:34:12.500
<00:34:09.400>own <00:34:09.527>website <00:34:09.654>or <00:34:09.781>it <00:34:09.909>should <00:34:10.036>be <00:34:10.163>in. <00:34:10.290>Url. <00:34:10.418>It <00:34:10.545>can't <00:34:10.672>be <00:34:10.800>a

690
00:34:12.500 --> 00:34:13.700
<00:34:12.500>YouTube <00:34:12.860>video <00:34:13.219>for <00:34:13.580>instance.

691
00:34:15.900 --> 00:34:17.400
<00:34:15.900>So <00:34:16.237>publish <00:34:16.575>this <00:34:16.912>on <00:34:17.250>npm.

692
00:34:19.500 --> 00:34:22.600
<00:34:19.500>And <00:34:19.607>now <00:34:19.715>I <00:34:19.823>can <00:34:19.930>use <00:34:20.038>it <00:34:20.146>like <00:34:20.253>this <00:34:20.361>in <00:34:20.469>my <00:34:20.576>brows. <00:34:20.684>So <00:34:20.792>without <00:34:20.900>Frameworks

693
00:34:22.600 --> 00:34:25.900
<00:34:22.600>yet. <00:34:22.880>I'm <00:34:23.159>using <00:34:23.440>unpackage <00:34:23.719>and <00:34:24.000>I'm

694
00:34:25.900 --> 00:34:27.400
<00:34:25.900>referring <00:34:26.350>to <00:34:26.800>this <00:34:27.250>component.

695
00:34:28.500 --> 00:34:31.200
<00:34:28.500>And <00:34:28.616>then <00:34:28.733>it <00:34:28.850>works <00:34:28.966>the <00:34:29.083>same <00:34:29.199>like <00:34:29.316>we <00:34:29.433>did <00:34:29.550>before <00:34:29.666>but <00:34:29.783>let's <00:34:29.900>look.

696
00:34:31.900 --> 00:34:34.300
<00:34:31.900>at <00:34:32.366>some <00:34:32.833>Frameworks <00:34:33.300>angular

697
00:34:35.400 --> 00:34:37.900
<00:34:35.400>What <00:34:35.527>do <00:34:35.654>I <00:34:35.781>need <00:34:35.909>to <00:34:36.036>do <00:34:36.163>in <00:34:36.290>angular <00:34:36.418>to <00:34:36.545>get <00:34:36.672>this <00:34:36.800>working?

698
00:34:41.100 --> 00:34:45.000
<00:34:41.100>Well, <00:34:41.207>of <00:34:41.315>course, <00:34:41.423>it <00:34:41.530>needs <00:34:41.638>to <00:34:41.746>be <00:34:41.853>one <00:34:41.961>of <00:34:42.069>the <00:34:42.176>one <00:34:42.284>million <00:34:42.392>dependencies <00:34:42.500>of

699
00:34:45.200 --> 00:34:45.500
<00:34:45.199>your <00:34:45.469>project.

700
00:34:46.900 --> 00:34:49.300
<00:34:46.900>So <00:34:47.075>I'm <00:34:47.250>installing <00:34:47.425>my <00:34:47.600>video <00:34:47.775>component <00:34:47.950>here <00:34:48.125>in <00:34:48.300>the

701
00:34:49.300 --> 00:34:49.900
<00:34:49.300>package <00:34:49.840>Jason.

702
00:34:51.300 --> 00:34:54.700
<00:34:51.300>And <00:34:51.440>in <00:34:51.580>this <00:34:51.720>case, <00:34:51.860>I'm <00:34:52.000>going <00:34:52.140>to <00:34:52.280>use <00:34:52.420>HTML5 <00:34:52.560>videos. <00:34:52.700>I'm

703
00:34:54.700 --> 00:34:57.500
<00:34:54.699>adding <00:34:54.933>this <00:34:55.166>video <00:34:55.399>to <00:34:55.633>my <00:34:55.866>Assets <00:34:56.100>in

704
00:34:57.500 --> 00:34:58.500
<00:34:57.500>my <00:34:57.950>project <00:34:58.400>itself.

705
00:35:00.400 --> 00:35:03.500
<00:35:00.400>Next <00:35:00.555>up. <00:35:00.711>I'm <00:35:00.866>going <00:35:01.022>to <00:35:01.177>my <00:35:01.333>app <00:35:01.488>module. <00:35:01.644>I'm <00:35:01.800>going

706
00:35:03.500 --> 00:35:06.300
<00:35:03.500>to <00:35:03.675>import <00:35:03.850>that <00:35:04.025>new <00:35:04.200>component <00:35:04.375>and <00:35:04.550>I <00:35:04.725>also <00:35:04.900>need

707
00:35:06.300 --> 00:35:09.000
<00:35:06.300>to <00:35:06.440>set <00:35:06.580>the <00:35:06.720>schema <00:35:06.860>to <00:35:07.000>accept <00:35:07.140>custom <00:35:07.280>elements. <00:35:07.420>If <00:35:07.560>I <00:35:07.700>don't

708
00:35:09.200 --> 00:35:12.900
<00:35:09.200>do <00:35:09.293>that <00:35:09.386>angular <00:35:09.480>will <00:35:09.573>say <00:35:09.666>well. <00:35:09.759>I <00:35:09.853>don't <00:35:09.946>know <00:35:10.040>what <00:35:10.133>you <00:35:10.226>want <00:35:10.319>to <00:35:10.413>do, <00:35:10.506>but <00:35:10.600>I'm

709
00:35:12.900 --> 00:35:13.500
<00:35:12.900>stopping <00:35:13.440>here.

710
00:35:16.700 --> 00:35:19.500
<00:35:16.700>and <00:35:16.899>lastly <00:35:17.100>in <00:35:17.299>my <00:35:17.500>app <00:35:17.700>component <00:35:17.899>HTML <00:35:18.100>file

711
00:35:20.400 --> 00:35:22.700
<00:35:20.400>I <00:35:20.680>included <00:35:20.960>somewhere <00:35:21.240>I <00:35:21.520>want <00:35:21.800>to.

712
00:35:23.600 --> 00:35:26.500
<00:35:23.600>And <00:35:23.727>it <00:35:23.854>will <00:35:23.981>look <00:35:24.109>like <00:35:24.236>this <00:35:24.363>it's <00:35:24.490>part <00:35:24.618>of <00:35:24.745>it <00:35:24.872>and <00:35:25.000>it's

713
00:35:26.500 --> 00:35:26.900
<00:35:26.500>fully <00:35:26.860>functional.

714
00:35:29.000 --> 00:35:29.400
View

715
00:35:31.200 --> 00:35:34.700
<00:35:31.200>for <00:35:31.433>view <00:35:31.666>same <00:35:31.899>less <00:35:32.133>dependencies. <00:35:32.366>I <00:35:32.600>created

716
00:35:34.700 --> 00:35:37.000
<00:35:34.700>this <00:35:34.855>project. <00:35:35.011>I <00:35:35.166>also <00:35:35.322>available <00:35:35.477>on <00:35:35.633>kitup <00:35:35.788>by <00:35:35.944>the <00:35:36.100>way

717
00:35:37.900 --> 00:35:40.400
<00:35:37.900>just <00:35:38.250>plain <00:35:38.600>boilerplate <00:35:38.950>projects. <00:35:39.300>So

718
00:35:40.400 --> 00:35:43.400
<00:35:40.400>I'm <00:35:40.540>adding <00:35:40.680>here <00:35:40.820>the <00:35:40.960>few <00:35:41.100>components <00:35:41.240>as <00:35:41.380>well <00:35:41.520>video <00:35:41.660>component <00:35:41.800>as

719
00:35:43.400 --> 00:35:46.400
<00:35:43.400>well <00:35:43.600>in <00:35:43.800>the <00:35:44.000>main <00:35:44.200>JSI <00:35:44.400>imported <00:35:44.600>and <00:35:44.800>then

720
00:35:46.400 --> 00:35:47.500
<00:35:46.400>in <00:35:46.647>the <00:35:46.895>app <00:35:47.142>Dot <00:35:47.390>View

721
00:35:48.100 --> 00:35:49.700
<00:35:48.100>template <00:35:48.450>I <00:35:48.799>can <00:35:49.150>use <00:35:49.500>it.

722
00:35:50.500 --> 00:35:51.200
<00:35:50.500>And <00:35:50.710>there <00:35:50.920>it <00:35:51.129>is.

723
00:35:54.300 --> 00:35:54.700
react

724
00:35:55.900 --> 00:35:58.100
<00:35:55.900>React <00:35:56.133>is <00:35:56.366>a <00:35:56.600>little <00:35:56.833>bit <00:35:57.066>more <00:35:57.300>difficult.

725
00:35:59.100 --> 00:36:00.400
<00:35:59.100>Of <00:35:59.392>course <00:35:59.685>I <00:35:59.977>added <00:36:00.270>again.

726
00:36:02.100 --> 00:36:04.000
<00:36:02.100>And <00:36:02.275>I <00:36:02.450>can <00:36:02.625>add <00:36:02.799>it <00:36:02.975>to <00:36:03.150>the <00:36:03.325>app <00:36:03.500>Js.

727
00:36:05.200 --> 00:36:08.000
<00:36:05.200>That's <00:36:05.355>it. <00:36:05.511>But <00:36:05.666>one <00:36:05.822>one <00:36:05.977>thing <00:36:06.133>to <00:36:06.288>keep <00:36:06.444>in <00:36:06.600>mind

728
00:36:08.200 --> 00:36:11.300
<00:36:08.200>of <00:36:08.339>react <00:36:08.480>is <00:36:08.620>I'm <00:36:08.759>just <00:36:08.899>showing <00:36:09.040>a <00:36:09.180>video <00:36:09.319>now, <00:36:09.460>but <00:36:09.600>if

729
00:36:11.300 --> 00:36:13.900
<00:36:11.300>you're <00:36:11.533>doing <00:36:11.766>extra <00:36:12.000>stuff <00:36:12.233>like <00:36:12.466>dispatching <00:36:12.700>events.

730
00:36:14.800 --> 00:36:17.400
<00:36:14.800>React <00:36:15.000>doesn't <00:36:15.200>really <00:36:15.400>work <00:36:15.600>that <00:36:15.800>well <00:36:16.000>with <00:36:16.200>Shadow

731
00:36:17.400 --> 00:36:20.200
<00:36:17.400>Dom. <00:36:17.555>Yeah, <00:36:17.711>so <00:36:17.866>you <00:36:18.022>might <00:36:18.177>need <00:36:18.333>to <00:36:18.488>write <00:36:18.644>a <00:36:18.800>little

732
00:36:20.200 --> 00:36:22.900
<00:36:20.200>wrapper <00:36:20.666>around <00:36:21.133>this <00:36:21.600>component.

733
00:36:26.900 --> 00:36:28.300
<00:36:26.900>This <00:36:27.110>is <00:36:27.320>how <00:36:27.530>it <00:36:27.740>looks <00:36:27.950>in <00:36:28.160>react.

734
00:36:30.500 --> 00:36:32.400
<00:36:30.500>Lastly <00:36:31.200>it's <00:36:31.900>felt.

735
00:36:33.200 --> 00:36:35.500
<00:36:33.200>It's <00:36:33.433>adding <00:36:33.666>the <00:36:33.899>component <00:36:34.133>again, <00:36:34.366>of <00:36:34.600>course.

736
00:36:36.500 --> 00:36:40.600
<00:36:36.500>And <00:36:36.655>then <00:36:36.811>importing <00:36:36.966>it <00:36:37.122>and <00:36:37.277>putting <00:36:37.433>it <00:36:37.588>in <00:36:37.744>HTML <00:36:37.900>plain

737
00:36:39.600 --> 00:36:41.000
<00:36:39.600>and <00:36:40.860>simple.

738
00:36:43.200 --> 00:36:46.500
<00:36:43.200>And <00:36:43.355>here <00:36:43.511>it <00:36:43.666>is <00:36:43.822>and <00:36:43.977>now <00:36:44.133>I'm <00:36:44.288>hoping <00:36:44.444>the <00:36:44.600>sound

739
00:36:46.500 --> 00:36:47.600
<00:36:46.500>is <00:36:46.747>working <00:36:46.995>on <00:36:47.242>my <00:36:47.490>laptop.

740
00:36:49.500 --> 00:36:50.000
<00:36:49.500>And <00:36:49.725>let's <00:36:49.950>see.

741
00:36:53.400 --> 00:36:55.300
<00:36:53.400>There's <00:36:53.633>a <00:36:53.866>giant <00:36:54.100>lizard <00:36:54.333>of <00:36:54.566>the <00:36:54.800>truck.

742
00:36:56.900 --> 00:36:57.900
<00:36:56.900>Yeah, <00:36:57.200>I'm <00:36:57.500>not <00:36:57.800>sure.

743
00:37:00.300 --> 00:37:02.100
<00:37:00.300>face <00:37:00.533>to <00:37:00.766>face <00:37:01.000>with <00:37:01.233>Godzilla <00:37:01.466>then <00:37:01.700>right

744
00:37:06.600 --> 00:37:09.100
<00:37:06.600>Yeah, <00:37:06.775>we <00:37:06.950>are <00:37:07.125>on <00:37:07.299>the <00:37:07.475>lookout <00:37:07.650>for <00:37:07.825>you <00:37:08.000>know

745
00:37:09.100 --> 00:37:12.600
<00:37:09.100>ducks <00:37:09.227>and <00:37:09.354>cats <00:37:09.481>on <00:37:09.609>the <00:37:09.736>road. <00:37:09.863>But <00:37:09.990>yeah <00:37:10.118>lizards. <00:37:10.245>That's <00:37:10.372>another <00:37:10.500>thing,

746
00:37:12.600 --> 00:37:12.700
right?

747
00:37:14.300 --> 00:37:17.900
<00:37:14.300>One <00:37:14.475>thing <00:37:14.650>I'm <00:37:14.825>not <00:37:15.000>going <00:37:15.175>to <00:37:15.350>into <00:37:15.525>deep <00:37:15.700>to

748
00:37:17.900 --> 00:37:20.600
<00:37:17.900>this <00:37:18.133>but <00:37:18.366>there <00:37:18.600>are <00:37:18.833>two <00:37:19.066>Frameworks <00:37:19.300>lit

749
00:37:20.600 --> 00:37:23.100
<00:37:20.600>and <00:37:20.775>stencil <00:37:20.950>that <00:37:21.125>can <00:37:21.299>make <00:37:21.475>your <00:37:21.650>life <00:37:21.825>a <00:37:22.000>little

750
00:37:23.100 --> 00:37:24.500
<00:37:23.100>bit <00:37:23.415>easier <00:37:23.730>making <00:37:24.045>web <00:37:24.360>components.

751
00:37:25.300 --> 00:37:26.900
<00:37:25.300>Keep <00:37:25.533>in <00:37:25.766>mind <00:37:26.000>that <00:37:26.233>lid <00:37:26.466>will <00:37:26.700>ship.

752
00:37:27.900 --> 00:37:30.400
<00:37:27.900>Some <00:37:28.100>extra <00:37:28.300>code <00:37:28.500>to <00:37:28.700>make <00:37:28.900>your <00:37:29.100>web <00:37:29.300>components

753
00:37:30.400 --> 00:37:31.600
<00:37:30.400>work <00:37:30.670>and <00:37:30.940>stencil <00:37:31.210>is <00:37:31.480>more.

754
00:37:33.400 --> 00:37:36.200
<00:37:33.400>Lightweighted <00:37:33.575>and <00:37:33.750>just <00:37:33.925>gives <00:37:34.100>you <00:37:34.275>the <00:37:34.450>tools <00:37:34.625>to <00:37:34.800>create

755
00:37:36.200 --> 00:37:36.700
<00:37:36.200>web <00:37:36.649>components.

756
00:37:38.100 --> 00:37:41.000
<00:37:38.100>If <00:37:38.227>you're <00:37:38.354>interested <00:37:38.481>have <00:37:38.609>a <00:37:38.736>look <00:37:38.863>they <00:37:38.990>have <00:37:39.118>great <00:37:39.245>documentation <00:37:39.372>as <00:37:39.500>well.

757
00:37:42.700 --> 00:37:47.200
<00:37:42.700>And <00:37:42.855>with <00:37:43.011>that <00:37:43.166>I <00:37:43.322>want <00:37:43.477>to <00:37:43.633>say <00:37:43.788>Duncan <00:37:43.944>the <00:37:44.100>slides

758
00:37:46.200 --> 00:37:49.500
<00:37:46.200>the <00:37:46.399>links <00:37:46.600>to <00:37:46.799>GitHub <00:37:47.000>with <00:37:47.200>all <00:37:47.399>the <00:37:47.600>demos

759
00:37:49.500 --> 00:37:52.200
<00:37:49.500>and <00:37:49.675>all <00:37:49.850>the <00:37:50.025>projects <00:37:50.200>is <00:37:50.375>on <00:37:50.550>this <00:37:50.725>short <00:37:50.900>code

760
00:37:52.200 --> 00:37:54.100
wadwc.

761
00:37:54.800 --> 00:37:57.400
<00:37:54.800>And <00:37:54.955>I <00:37:55.111>think <00:37:55.266>we <00:37:55.422>have <00:37:55.577>some <00:37:55.733>time <00:37:55.888>left <00:37:56.044>for <00:37:56.200>questions.

762
00:37:57.400 --> 00:38:00.100
<00:37:57.400>So <00:37:57.600>if <00:37:57.800>you <00:37:58.000>have <00:37:58.200>any <00:37:58.400>let's <00:37:58.600>do <00:37:58.800>it.

763
00:38:02.600 --> 00:38:03.100
<00:38:02.600>Thank <00:38:03.049>you.

764
00:38:05.900 --> 00:38:07.200
<00:38:05.900>Thank <00:38:06.134>you <00:38:06.368>Ravi <00:38:06.602>for <00:38:06.836>the <00:38:07.069>presentation.

765
00:38:08.700 --> 00:38:11.400
<00:38:08.700>So <00:38:08.827>there <00:38:08.954>are <00:38:09.081>a <00:38:09.209>lot <00:38:09.336>of <00:38:09.463>questions <00:38:09.590>that <00:38:09.718>have <00:38:09.845>been <00:38:09.972>posed. <00:38:10.100>Okay,

766
00:38:11.400 --> 00:38:14.900
<00:38:11.400>and <00:38:11.600>one <00:38:11.800>of <00:38:12.000>the <00:38:12.200>most <00:38:12.400>rated <00:38:12.600>one <00:38:12.800>is

767
00:38:14.900 --> 00:38:17.100
<00:38:14.900>how <00:38:15.180>can <00:38:15.460>ft <00:38:15.740>quote <00:38:16.020>work <00:38:16.300>with

768
00:38:17.100 --> 00:38:20.900
<00:38:17.100>accessibility, <00:38:17.380>especially <00:38:17.660>when <00:38:17.940>JS <00:38:18.220>is <00:38:18.500>disabled.

769
00:38:21.900 --> 00:38:24.400
<00:38:21.900>Well <00:38:22.366>when <00:38:22.833>JavaScript <00:38:23.300>is

770
00:38:24.400 --> 00:38:25.500
<00:38:24.400>disabled <00:38:24.647>you <00:38:24.895>don't <00:38:25.142>see <00:38:25.390>the

771
00:38:26.200 --> 00:38:29.500
<00:38:26.200>You <00:38:26.327>don't <00:38:26.454>see <00:38:26.581>the <00:38:26.709>element <00:38:26.836>as <00:38:26.963>any <00:38:27.090>way <00:38:27.218>so <00:38:27.345>that's <00:38:27.472>that's <00:38:27.600>a

772
00:38:29.500 --> 00:38:32.500
<00:38:29.500>problem. <00:38:29.733>Definitely <00:38:29.966>so <00:38:30.200>I <00:38:30.433>wouldn't <00:38:30.666>just <00:38:30.900>like

773
00:38:32.500 --> 00:38:35.300
<00:38:32.500>using <00:38:32.733>Frameworks. <00:38:32.966>I <00:38:33.200>would <00:38:33.433>be <00:38:33.666>sensible <00:38:33.900>about

774
00:38:35.300 --> 00:38:38.300
<00:38:35.300>it <00:38:35.533>only <00:38:35.766>use <00:38:36.000>it <00:38:36.233>where <00:38:36.466>it <00:38:36.700>gives

775
00:38:38.300 --> 00:38:39.200
<00:38:38.300>you <00:38:38.570>some <00:38:38.840>extra <00:38:39.109>stuff.

776
00:38:40.500 --> 00:38:43.600
<00:38:40.500>Always <00:38:40.850>use <00:38:41.200>plain <00:38:41.550>HTML <00:38:41.900>and

777
00:38:43.600 --> 00:38:46.200
<00:38:43.600>CSF <00:38:43.950>CSS <00:38:44.299>if <00:38:44.650>you're <00:38:45.000>doing

778
00:38:46.200 --> 00:38:47.300
<00:38:46.200>the <00:38:46.695>normal <00:38:47.190>stuff.

779
00:38:48.100 --> 00:38:50.600
<00:38:48.100>But <00:38:48.275>sometimes <00:38:48.450>yeah, <00:38:48.625>you <00:38:48.799>need <00:38:48.975>to <00:38:49.150>have <00:38:49.325>something <00:38:49.500>extra.

780
00:38:51.800 --> 00:38:54.500
<00:38:51.800>What <00:38:52.000>are <00:38:52.200>the <00:38:52.400>benefits <00:38:52.600>of <00:38:52.800>using <00:38:53.000>web <00:38:53.200>components

781
00:38:54.500 --> 00:38:58.000
<00:38:54.500>overreact <00:38:54.780>or <00:38:55.060>JS <00:38:55.340>framework <00:38:55.620>JavaScript <00:38:55.900>framework?

782
00:38:57.400 --> 00:39:00.600
<00:38:57.400>I've <00:38:57.633>got <00:38:57.866>to <00:38:58.100>mention <00:38:58.333>that <00:38:58.566>good <00:38:58.800>question.

783
00:39:01.500 --> 00:39:04.400
<00:39:01.500>I <00:39:01.655>work <00:39:01.811>at <00:39:01.966>a <00:39:02.122>large <00:39:02.277>insurance <00:39:02.433>company <00:39:02.588>in <00:39:02.744>the <00:39:02.900>Netherlands.

784
00:39:04.400 --> 00:39:07.800
<00:39:04.400>We <00:39:04.633>are <00:39:04.866>serving <00:39:05.100>about <00:39:05.333>five <00:39:05.566>million <00:39:05.800>customers

785
00:39:07.800 --> 00:39:10.500
<00:39:07.800>and <00:39:08.033>we <00:39:08.266>have <00:39:08.500>many <00:39:08.733>departments. <00:39:08.966>We <00:39:09.200>are

786
00:39:10.500 --> 00:39:13.200
<00:39:10.500>riding <00:39:10.733>our <00:39:10.966>components <00:39:11.200>in <00:39:11.433>view <00:39:11.666>other <00:39:11.900>ones

787
00:39:13.200 --> 00:39:16.100
<00:39:13.200>like <00:39:13.399>react <00:39:13.600>another <00:39:13.799>one's <00:39:14.000>my <00:39:14.200>Max <00:39:14.399>say <00:39:14.600>well

788
00:39:16.100 --> 00:39:16.900
<00:39:16.100>we <00:39:16.460>want <00:39:16.820>angular.

789
00:39:17.900 --> 00:39:20.100
<00:39:17.900>With <00:39:18.075>using <00:39:18.250>web <00:39:18.425>components, <00:39:18.600>you <00:39:18.775>only <00:39:18.950>have <00:39:19.125>to <00:39:19.300>write

790
00:39:20.100 --> 00:39:23.500
<00:39:20.100>it <00:39:20.275>once <00:39:20.450>and <00:39:20.625>not <00:39:20.799>everybody <00:39:20.975>is <00:39:21.150>going <00:39:21.325>to <00:39:21.500>recreate

791
00:39:23.500 --> 00:39:24.300
<00:39:23.500>that <00:39:23.860>button <00:39:24.220>again.

792
00:39:24.900 --> 00:39:28.000
<00:39:24.900>So <00:39:25.180>it's <00:39:25.460>using <00:39:25.740>it <00:39:26.020>in <00:39:26.300>every

793
00:39:27.400 --> 00:39:29.700
<00:39:27.400>framework <00:39:27.680>you <00:39:27.960>want. <00:39:28.240>That's <00:39:28.520>the <00:39:28.800>benefit.

794
00:39:31.700 --> 00:39:34.100
<00:39:31.700>Yeah, <00:39:31.827>I'm <00:39:31.954>a <00:39:32.081>big <00:39:32.209>fan <00:39:32.336>of <00:39:32.463>vanilla <00:39:32.590>JavaScript. <00:39:32.718>Like <00:39:32.845>I <00:39:32.972>would <00:39:33.100>say

795
00:39:34.100 --> 00:39:37.500
<00:39:34.100>whatever <00:39:34.227>you <00:39:34.354>can <00:39:34.481>do <00:39:34.609>with <00:39:34.736>just <00:39:34.863>pure <00:39:34.990>JavaScript <00:39:35.118>do <00:39:35.245>it. <00:39:35.372>Definitely <00:39:35.500>and

796
00:39:39.100 --> 00:39:42.700
<00:39:39.100>Do <00:39:39.275>all <00:39:39.450>the <00:39:39.625>major <00:39:39.799>browser <00:39:39.975>engine <00:39:40.150>already <00:39:40.325>support <00:39:40.500>the

797
00:39:42.700 --> 00:39:46.900
<00:39:42.700>pseudo <00:39:43.049>part <00:39:43.399>class <00:39:43.750>selector <00:39:44.100>slowly

798
00:39:45.900 --> 00:39:50.300
<00:39:45.900>so <00:39:46.250>you <00:39:46.600>can <00:39:46.950>rely <00:39:47.300>on

799
00:39:49.300 --> 00:39:52.700
<00:39:49.300>it <00:39:49.650>over <00:39:50.000>using <00:39:50.350>CSS <00:39:50.700>variables.

800
00:39:54.800 --> 00:39:57.400
<00:39:54.800>I <00:39:54.940>have <00:39:55.080>to <00:39:55.220>lie <00:39:55.360>a <00:39:55.500>little <00:39:55.640>bit, <00:39:55.780>but <00:39:55.920>I <00:39:56.060>think <00:39:56.200>they

801
00:39:57.400 --> 00:40:00.500
<00:39:57.400>do <00:39:57.540>but <00:39:57.680>I <00:39:57.820>have <00:39:57.960>to <00:39:58.100>I <00:39:58.240>will <00:39:58.380>check <00:39:58.520>and <00:39:58.660>I <00:39:58.800>will

802
00:40:00.500 --> 00:40:01.900
<00:40:00.500>post <00:40:00.752>it <00:40:01.004>on <00:40:01.256>on <00:40:01.508>my <00:40:01.760>Twitter.

803
00:40:03.100 --> 00:40:06.800
<00:40:03.100>What <00:40:03.299>about <00:40:03.500>web <00:40:03.700>components <00:40:03.900>and <00:40:04.100>accessibility <00:40:04.299>house <00:40:04.500>screen

804
00:40:06.800 --> 00:40:07.700
<00:40:06.800>readers <00:40:07.070>can <00:40:07.340>handle <00:40:07.609>it?

805
00:40:08.700 --> 00:40:11.200
<00:40:08.700>As <00:40:08.980>long <00:40:09.259>as <00:40:09.540>you <00:40:09.819>give <00:40:10.100>them

806
00:40:11.200 --> 00:40:15.500
<00:40:11.200>the <00:40:11.549>inside <00:40:11.899>the <00:40:12.250>proper <00:40:12.600>HTML

807
00:40:14.500 --> 00:40:17.100
<00:40:14.500>elements, <00:40:14.850>then <00:40:15.200>it's <00:40:15.550>no <00:40:15.900>problem.

808
00:40:17.100 --> 00:40:18.800
<00:40:17.100>It's <00:40:17.299>just <00:40:17.500>a <00:40:17.700>layer <00:40:17.900>on <00:40:18.100>top <00:40:18.299>of <00:40:18.500>it.

809
00:40:20.300 --> 00:40:23.400
<00:40:20.300>Can <00:40:20.475>I <00:40:20.650>use <00:40:20.825>multi-line <00:40:21.000>templates <00:40:21.175>with <00:40:21.350>temple <00:40:21.525>strings? <00:40:21.700>Yep.

810
00:40:25.300 --> 00:40:28.200
<00:40:25.300>How <00:40:25.475>do <00:40:25.650>you <00:40:25.825>decide <00:40:26.000>it <00:40:26.175>which <00:40:26.350>components <00:40:26.525>to <00:40:26.700>create

811
00:40:28.200 --> 00:40:32.500
<00:40:28.200>in <00:40:28.355>your <00:40:28.511>framework <00:40:28.666>and <00:40:28.822>which <00:40:28.977>as <00:40:29.133>web <00:40:29.288>components <00:40:29.444>perhaps <00:40:29.600>dump

812
00:40:32.500 --> 00:40:33.200
<00:40:32.500>components <00:40:32.815>can <00:40:33.129>be.

813
00:40:34.400 --> 00:40:37.400
<00:40:34.400>Web <00:40:34.575>components <00:40:34.750>and <00:40:34.925>smart <00:40:35.100>components <00:40:35.275>can <00:40:35.450>maintain <00:40:35.625>in <00:40:35.800>your

814
00:40:37.400 --> 00:40:41.300
<00:40:37.400>framework. <00:40:37.555>Well, <00:40:37.711>they <00:40:37.866>give <00:40:38.022>any <00:40:38.177>answer <00:40:38.333>themselves. <00:40:38.488>Yes, <00:40:38.644>the <00:40:38.800>dumb

815
00:40:40.300 --> 00:40:45.600
<00:40:40.300>things <00:40:40.650>like <00:40:41.000>buttons <00:40:41.350>breadcrumbs. <00:40:41.700>I

816
00:40:44.600 --> 00:40:47.300
<00:40:44.600>don't <00:40:44.880>know <00:40:45.160>what <00:40:45.440>else <00:40:45.720>we're <00:40:46.000>building

817
00:40:47.300 --> 00:40:50.800
<00:40:47.300>that <00:40:47.440>should <00:40:47.580>that <00:40:47.720>could <00:40:47.860>be <00:40:48.000>web <00:40:48.140>components <00:40:48.280>because <00:40:48.420>they <00:40:48.560>look <00:40:48.700>the

818
00:40:50.800 --> 00:40:52.600
<00:40:50.800>same <00:40:50.975>act <00:40:51.150>the <00:40:51.325>same <00:40:51.500>but <00:40:51.675>if <00:40:51.850>you're <00:40:52.025>doing <00:40:52.200>something

819
00:40:53.600 --> 00:40:56.800
<00:40:53.600>Yeah <00:40:53.950>more <00:40:54.299>smart. <00:40:54.650>And <00:40:55.000>yeah,

820
00:40:56.800 --> 00:40:59.000
<00:40:56.800>you <00:40:56.975>should <00:40:57.150>probably <00:40:57.325>go <00:40:57.500>to <00:40:57.675>the <00:40:57.850>framework <00:40:58.025>you're <00:40:58.200>using.

821
00:40:59.700 --> 00:41:02.900
<00:40:59.700>Why <00:40:59.980>using <00:41:00.259>web <00:41:00.540>components <00:41:00.819>isn't <00:41:01.100>using

822
00:41:02.900 --> 00:41:05.200
<00:41:02.900>our <00:41:03.180>Fe <00:41:03.460>framework <00:41:03.740>just <00:41:04.020>easier <00:41:04.300>and

823
00:41:05.200 --> 00:41:06.200
<00:41:05.200>does <00:41:05.500>the <00:41:05.799>same <00:41:06.100>job.

824
00:41:09.800 --> 00:41:13.800
<00:41:09.800>We're <00:41:10.033>getting <00:41:10.266>provocative. <00:41:10.500>Yeah. <00:41:10.733>Yeah, <00:41:10.966>I <00:41:11.200>have

825
00:41:13.800 --> 00:41:16.500
<00:41:13.800>to <00:41:13.975>admit <00:41:14.150>we <00:41:14.325>started <00:41:14.500>with <00:41:14.675>web <00:41:14.850>components <00:41:15.025>and <00:41:15.200>then

826
00:41:16.500 --> 00:41:17.300
<00:41:16.500>we <00:41:16.860>got <00:41:17.220>pushback.

827
00:41:18.100 --> 00:41:22.400
<00:41:18.100>So <00:41:18.275>we're <00:41:18.450>building <00:41:18.625>view <00:41:18.799>components <00:41:18.975>now <00:41:19.150>again <00:41:19.325>sure <00:41:19.500>it

828
00:41:22.400 --> 00:41:26.500
<00:41:22.400>can <00:41:22.507>be <00:41:22.615>easier. <00:41:22.723>But <00:41:22.830>if <00:41:22.938>you <00:41:23.046>want <00:41:23.153>to <00:41:23.261>save <00:41:23.369>time <00:41:23.476>and <00:41:23.584>money <00:41:23.692>across <00:41:23.800>a

829
00:41:26.500 --> 00:41:29.700
<00:41:26.500>company <00:41:26.675>or <00:41:26.850>maybe <00:41:27.025>next <00:41:27.200>year <00:41:27.375>saying, <00:41:27.550>well, <00:41:27.725>there's <00:41:27.900>this

830
00:41:29.700 --> 00:41:32.600
<00:41:29.700>new <00:41:30.166>great <00:41:30.633>JavaScript <00:41:31.100>framework

831
00:41:32.600 --> 00:41:35.400
<00:41:32.600>you <00:41:32.727>want <00:41:32.854>to <00:41:32.981>use <00:41:33.109>then <00:41:33.236>do <00:41:33.363>you <00:41:33.490>really <00:41:33.618>want <00:41:33.745>to <00:41:33.872>rewrite <00:41:34.000>all

832
00:41:35.400 --> 00:41:38.300
<00:41:35.400>those <00:41:35.575>silly <00:41:35.750>components <00:41:35.925>again, <00:41:36.100>like <00:41:36.275>buttons <00:41:36.450>and <00:41:36.625>input <00:41:36.800>Fields.

833
00:41:38.300 --> 00:41:39.500
<00:41:38.300>I <00:41:38.660>don't <00:41:39.020>think <00:41:39.380>so.

834
00:41:41.200 --> 00:41:45.100
<00:41:41.200>Okay, <00:41:41.307>I <00:41:41.415>will <00:41:41.523>say <00:41:41.630>that <00:41:41.738>the <00:41:41.846>other <00:41:41.953>question <00:41:42.061>can <00:41:42.169>be <00:41:42.276>answered <00:41:42.384>like <00:41:42.492>personally <00:41:42.600>sure

835
00:41:44.100 --> 00:41:47.300
<00:41:44.100>can <00:41:44.275>reach <00:41:44.450>out <00:41:44.625>to <00:41:44.799>I'm <00:41:44.975>around <00:41:45.150>but <00:41:45.325>a <00:41:45.500>big

836
00:41:47.300 --> 00:41:49.300
<00:41:47.300>round <00:41:47.500>of <00:41:47.700>applause <00:41:47.900>and <00:41:48.100>thank <00:41:48.300>you. <00:41:48.500>Thank <00:41:48.700>you.