title
Web Components Crash Course

description
This is an introductory crash course on web components including custom elements, shadow DOM and HTML templates. Code: https://codepen.io/bradtraversy/pen/wvaXKoK 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Web Components Crash Course', 'heatmap': [{'end': 262.62, 'start': 242.108, 'weight': 0.784}, {'end': 503.52, 'start': 482.907, 'weight': 0.801}, {'end': 555.279, 'start': 532.57, 'weight': 1}, {'end': 819.354, 'start': 796.713, 'weight': 0.771}, {'end': 1196.515, 'start': 1157.828, 'weight': 0.813}], 'summary': 'This crash course on web components covers their advantages, implementation using vanilla javascript, and creating a user card web component from scratch, emphasizing custom elements, shadow dom, and html templates. it also delves into encapsulating markup and styles, creating interactive elements, and utilizing slots for dynamic content.', 'chapters': [{'end': 230.965, 'segs': [{'end': 97.867, 'src': 'embed', 'start': 66.646, 'weight': 0, 'content': [{'end': 72.169, 'text': 'reusable and encapsulated HTML tags that we can use in web pages and web apps.', 'start': 66.646, 'duration': 5.523}, {'end': 80.113, 'text': "So if you've ever used a front end framework again like react or view, one of the main advantages is having an organized UI of components.", 'start': 72.629, 'duration': 7.484}, {'end': 88.379, 'text': 'If you have a header component that includes the markup or the output, It includes the styling and any JavaScript functionality that comes with it,', 'start': 80.593, 'duration': 7.786}, {'end': 90.44, 'text': 'and you can simply embed it on the page.', 'start': 88.379, 'duration': 2.061}, {'end': 97.867, 'text': "So web components work in a similar way and we don't need to install any kind of third party framework or library or anything like that.", 'start': 90.861, 'duration': 7.006}], 'summary': 'Web components provide reusable html tags, offering organized ui and eliminating the need for third-party frameworks.', 'duration': 31.221, 'max_score': 66.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo66646.jpg'}, {'end': 148.202, 'src': 'embed', 'start': 109.936, 'weight': 1, 'content': [{'end': 113.999, 'text': 'We have custom elements, the shadow DOM and HTML templates.', 'start': 109.936, 'duration': 4.063}, {'end': 115.821, 'text': 'So these all work together.', 'start': 114.119, 'duration': 1.702}, {'end': 118.043, 'text': 'You can use them, use them individually.', 'start': 115.901, 'duration': 2.142}, {'end': 121.746, 'text': "But for the most part, when you create Web components, you're going to be using all three.", 'start': 118.343, 'duration': 3.403}, {'end': 126.15, 'text': 'So I just want to go over all three and just kind of explain what they are.', 'start': 121.826, 'duration': 4.324}, {'end': 135.075, 'text': 'So first off, custom elements, they give us the capability to create our own custom HTML tags, just like you have a header tag footer paragraph.', 'start': 126.81, 'duration': 8.265}, {'end': 138.376, 'text': 'We can create completely custom tags as well.', 'start': 135.455, 'duration': 2.921}, {'end': 142.438, 'text': 'We can also we can actually extend HTML tags as well.', 'start': 138.436, 'duration': 4.002}, {'end': 148.202, 'text': 'So this is done by creating a class within our JavaScript that extends this HTML element.', 'start': 142.899, 'duration': 5.303}], 'summary': 'Web components consist of custom elements, shadow dom, and html templates, allowing the creation of custom html tags and extension of existing tags.', 'duration': 38.266, 'max_score': 109.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo109936.jpg'}], 'start': 7.526, 'title': 'Web components and vanilla javascript', 'summary': 'Covers web components, their advantages, and implementation using vanilla javascript, presenting a practical example of creating a user card web component from scratch, and discussing the main building blocks - custom elements, shadow dom, and html templates.', 'chapters': [{'end': 66.646, 'start': 7.526, 'title': 'Web components crash course', 'summary': 'Introduces the concept of web components as a way to create encapsulated user interface elements without relying on specific front end frameworks, presenting a practical example of creating a user card web component from scratch.', 'duration': 59.12, 'highlights': ['Web components are a way to create encapsulated user interface elements without relying on specific front end frameworks, providing flexibility and reducing the risk of obsolescence.', 'Front end web development involves various frameworks and tools, but the common theme is delivering high quality user interfaces with encapsulated components.', 'In the crash course, the focus is on explaining what web components are, followed by a practical demonstration of creating a user card web component from scratch.']}, {'end': 230.965, 'start': 66.646, 'title': 'Understanding web components in vanilla javascript', 'summary': 'Discusses the advantages of using web components in web pages and apps, including the three main building blocks: custom elements, shadow dom, and html templates, all of which can be implemented with vanilla javascript and integrated with frameworks like react.', 'duration': 164.319, 'highlights': ['Advantages of using Web Components Web components provide an organized UI of components, allowing for the encapsulation and reusability of HTML tags, styling, and JavaScript functionality, without the need for third-party frameworks, such as React or Vue.', 'Building Blocks of Web Components The three main building blocks of web components are custom elements, the shadow DOM, and HTML templates, which work together to create custom HTML tags, extend existing HTML tags, and define lifecycle methods for the elements.', 'Custom Elements and Lifecycle Methods Custom elements allow the creation of custom HTML tags and the extension of existing tags, with the capability to define lifecycle methods such as constructor, connected callback, disconnected callback, and attribute changed callback.']}], 'duration': 223.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo7526.jpg', 'highlights': ['Web components provide an organized UI of components, allowing for encapsulation and reusability.', 'Custom elements allow the creation of custom HTML tags and the extension of existing tags.', 'The three main building blocks of web components are custom elements, the shadow DOM, and HTML templates.']}, {'end': 700.709, 'segs': [{'end': 280.6, 'src': 'heatmap', 'start': 242.108, 'weight': 1, 'content': [{'end': 247.15, 'text': "So the shadow DOM is it's basically self containment.", 'start': 242.108, 'duration': 5.042}, {'end': 252.373, 'text': 'It allows us to encapsulate all of our markup and our styles in our custom element.', 'start': 247.23, 'duration': 5.143}, {'end': 258.636, 'text': "So it's basically its own entity apart from the, you know, the regular DOM, the document object model.", 'start': 252.813, 'duration': 5.823}, {'end': 262.62, 'text': 'So the styling is separate from the global CSS of the web page.', 'start': 259.096, 'duration': 3.524}, {'end': 270.009, 'text': 'So if we have like an H3 inside of our web component and we have it styled a certain way, that style is going to stick.', 'start': 263.101, 'duration': 6.908}, {'end': 277.939, 'text': "And if there's any global styles on the web page, it's not going to affect our H3 or whatever element that we're talking about.", 'start': 270.33, 'duration': 7.609}, {'end': 280.6, 'text': 'OK, so we have scope styles.', 'start': 278.479, 'duration': 2.121}], 'summary': 'Shadow dom encapsulates markup and styles, ensuring separate styling from global css.', 'duration': 49.214, 'max_score': 242.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo242108.jpg'}, {'end': 349.693, 'src': 'embed', 'start': 322.14, 'weight': 4, 'content': [{'end': 325.322, 'text': 'The template tag allows us to store some markup on the page.', 'start': 322.14, 'duration': 3.182}, {'end': 327.744, 'text': 'You can later clone and reuse.', 'start': 326.063, 'duration': 1.681}, {'end': 331.927, 'text': 'So we can include both HTML and CSS in our template.', 'start': 328.244, 'duration': 3.683}, {'end': 340.893, 'text': 'We can also make use of something called slots which allow us to make the template dynamic and add output to it or add custom text to it.', 'start': 332.687, 'duration': 8.206}, {'end': 345.01, 'text': "OK, so now I mean, that's it for the slide.", 'start': 342.409, 'duration': 2.601}, {'end': 349.693, 'text': 'So I want to jump in and just show you what makes up a Web component.', 'start': 345.03, 'duration': 4.663}], 'summary': 'Template tag allows storing markup, including html and css. slots make template dynamic.', 'duration': 27.553, 'max_score': 322.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo322140.jpg'}, {'end': 399.427, 'src': 'embed', 'start': 369.929, 'weight': 0, 'content': [{'end': 372.212, 'text': 'I have an H3 and then a script.', 'start': 369.929, 'duration': 2.283}, {'end': 375.234, 'text': 'with the source of user card JS.', 'start': 373.353, 'duration': 1.881}, {'end': 380.216, 'text': 'So what I would like to do here is create a user card web component.', 'start': 375.834, 'duration': 4.382}, {'end': 384.439, 'text': 'So I want to be able to actually have user card like this.', 'start': 380.256, 'duration': 4.183}, {'end': 388.461, 'text': 'OK And have that output whatever I want really.', 'start': 384.459, 'duration': 4.002}, {'end': 391.983, 'text': "In this case it's going to be an avatar a user image.", 'start': 388.941, 'duration': 3.042}, {'end': 399.427, 'text': 'a name, a phone, an email and also a button to show and hide the phone and email.', 'start': 392.503, 'duration': 6.924}], 'summary': 'Creating a user card web component with avatar, name, phone, email, and a toggle button.', 'duration': 29.498, 'max_score': 369.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo369929.jpg'}, {'end': 508.383, 'src': 'heatmap', 'start': 482.907, 'weight': 0.801, 'content': [{'end': 489.29, 'text': 'So user card and then the class that we want to connect it to, which is the user card class we just created.', 'start': 482.907, 'duration': 6.383}, {'end': 492.912, 'text': "And once I save, you'll see that it outputs John Doe on the screen.", 'start': 489.69, 'duration': 3.222}, {'end': 499.096, 'text': "OK, so I mean, that that's the basics of creating a custom element.", 'start': 492.932, 'duration': 6.164}, {'end': 501.218, 'text': 'We have custom tag.', 'start': 499.576, 'duration': 1.642}, {'end': 503.52, 'text': 'We have this class with a constructor.', 'start': 501.578, 'duration': 1.942}, {'end': 508.383, 'text': "All we've done is set the inner HTML and we've defined it here.", 'start': 504.3, 'duration': 4.083}], 'summary': "Creating a custom element outputs 'john doe' on screen.", 'duration': 25.476, 'max_score': 482.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo482907.jpg'}, {'end': 555.279, 'src': 'heatmap', 'start': 532.57, 'weight': 1, 'content': [{'end': 542.013, 'text': "let's go ahead and since we use back ticks, we can use a template literal, we can use this syntax and let's say this dot get attribute.", 'start': 532.57, 'duration': 9.443}, {'end': 549.356, 'text': 'OK, this pertaining to our custom element and we want to get the attribute of name and save, and now it still says John Doe.', 'start': 542.333, 'duration': 7.023}, {'end': 555.279, 'text': 'if I change it to John does and save, we get John does and we can create multiple cards.', 'start': 549.356, 'duration': 5.923}], 'summary': "Using template literals and custom elements, we retrieved the attribute 'name' and successfully created multiple cards.", 'duration': 22.709, 'max_score': 532.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo532570.jpg'}], 'start': 231.386, 'title': 'Web components and shadow dom', 'summary': 'Discusses how using shadow dom in web components allows for encapsulation of markup and styles, ensuring separate styling from global css and scope styles. it also covers creating shadow dom, html templates, and custom elements, with a demonstration of creating a user card web component that can display dynamic content and encapsulate styling using the shadow dom.', 'chapters': [{'end': 280.6, 'start': 231.386, 'title': 'Web components and shadow dom', 'summary': 'Discusses how using shadow dom in web components allows for encapsulation of markup and styles, ensuring separate styling from global css and scope styles.', 'duration': 49.214, 'highlights': ['The shadow DOM allows us to encapsulate all of our markup and our styles in our custom element, ensuring self-containment and separate styling from the global CSS.', 'Styling within the shadow DOM ensures that the styles are not affected by any global styles on the web page, providing scope styles and maintaining the specified style for elements like H3.']}, {'end': 700.709, 'start': 281.56, 'title': 'Creating web components', 'summary': 'Covers creating shadow dom, html templates, and custom elements, with a demonstration of creating a user card web component that can display dynamic content and encapsulate styling using the shadow dom.', 'duration': 419.149, 'highlights': ['Creating a user card web component The instructor demonstrates creating a user card web component with dynamic content, including an avatar, user image, name, phone, email, and a button for interactivity.', 'Encapsulating styling using the shadow DOM The process of encapsulating styling using the shadow DOM is explained, with the instructor demonstrating the use of shadow DOM to prevent global styles from affecting the custom element.', 'Using HTML templates and slots for dynamic content The usage of HTML templates and slots for creating dynamic content within the web component is explained, allowing for the inclusion of both HTML and CSS as well as the addition of custom text.']}], 'duration': 469.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo231386.jpg', 'highlights': ['Creating a user card web component with dynamic content, including an avatar, user image, name, phone, email, and a button for interactivity.', 'The shadow DOM allows us to encapsulate all of our markup and our styles in our custom element, ensuring self-containment and separate styling from the global CSS.', 'Styling within the shadow DOM ensures that the styles are not affected by any global styles on the web page, providing scope styles and maintaining the specified style for elements like H3.', 'The process of encapsulating styling using the shadow DOM is explained, with the instructor demonstrating the use of shadow DOM to prevent global styles from affecting the custom element.', 'Using HTML templates and slots for dynamic content within the web component is explained, allowing for the inclusion of both HTML and CSS as well as the addition of custom text.']}, {'end': 1151.462, 'segs': [{'end': 759.728, 'src': 'embed', 'start': 724.129, 'weight': 3, 'content': [{'end': 729.012, 'text': "it's gonna create a new element of template.", 'start': 724.129, 'duration': 4.883}, {'end': 739.087, 'text': "Okay, and then what we'll do is take our template and and set the inner HTML to whatever we want.", 'start': 729.012, 'duration': 10.075}, {'end': 741.168, 'text': 'So be sure to use back ticks here.', 'start': 739.127, 'duration': 2.041}, {'end': 745.031, 'text': "And let's add in style.", 'start': 741.969, 'duration': 3.062}, {'end': 754.817, 'text': "And let's set our H3 style color to coral.", 'start': 748.453, 'duration': 6.364}, {'end': 756.307, 'text': 'All right.', 'start': 756.007, 'duration': 0.3}, {'end': 759.728, 'text': 'Now, in addition to styling, we want our markup here as well.', 'start': 756.387, 'duration': 3.341}], 'summary': 'Creating a new template element and setting inner html with back ticks and adding h3 style color to coral.', 'duration': 35.599, 'max_score': 724.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo724129.jpg'}, {'end': 839.164, 'src': 'heatmap', 'start': 796.713, 'weight': 0.771, 'content': [{'end': 801.938, 'text': "So we're actually going to just leave this blank and we're going to deal with it down here.", 'start': 796.713, 'duration': 5.225}, {'end': 804.561, 'text': "So let's see.", 'start': 802.839, 'duration': 1.722}, {'end': 808.687, 'text': "So far we have we've added the template.", 'start': 804.681, 'duration': 4.006}, {'end': 809.788, 'text': "So now I'm going to take.", 'start': 808.727, 'duration': 1.061}, {'end': 819.354, 'text': 'the shadow route because from now on this is what we want to use to select stuff from our custom element or from I should say our web component.', 'start': 810.646, 'duration': 8.708}, {'end': 839.164, 'text': "So we're going to use query selector and we're going to select the H3 and let's set the inner text and then set that to this to what we had before this dot get attribute and we want the name attribute.", 'start': 819.814, 'duration': 19.35}], 'summary': 'Using query selector to select h3 and set inner text to the name attribute from custom element.', 'duration': 42.451, 'max_score': 796.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo796713.jpg'}, {'end': 896.417, 'src': 'embed', 'start': 869.112, 'weight': 0, 'content': [{'end': 881.361, 'text': "And also if I open up my chrome dev tools and let's just inspect this so we can see the H3 and then it'll show us our user card web component with the shadow route.", 'start': 869.112, 'duration': 12.249}, {'end': 884.224, 'text': 'OK and inside the shadow route is our H3.', 'start': 881.381, 'duration': 2.843}, {'end': 888.428, 'text': 'We have our style tags and then we have our div with our H3.', 'start': 885.265, 'duration': 3.163}, {'end': 896.417, 'text': 'Okay, so another thing that I would like to do is pass in an attribute for an avatar or an image.', 'start': 889.029, 'duration': 7.388}], 'summary': 'Using chrome dev tools to inspect a web component, revealing h3 inside the shadow route and the intention to add an attribute for an avatar or image.', 'duration': 27.305, 'max_score': 869.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo869112.jpg'}, {'end': 1128.565, 'src': 'embed', 'start': 1077.8, 'weight': 1, 'content': [{'end': 1088.702, 'text': "So let's give this an ID of toggle info and we'll just say let's say hide info.", 'start': 1077.8, 'duration': 10.902}, {'end': 1093.721, 'text': "So we'll add some JavaScript to change the text as well to hide and show.", 'start': 1089.557, 'duration': 4.164}, {'end': 1099.447, 'text': 'So if I save that, we just have our paragraphs here and then our button.', 'start': 1094.622, 'duration': 4.825}, {'end': 1101.629, 'text': 'Now, I do want to add some styling.', 'start': 1100.028, 'duration': 1.601}, {'end': 1107.956, 'text': "So I don't want to type all the CSS out because I think that's not the focus of this course.", 'start': 1101.77, 'duration': 6.186}, {'end': 1111.059, 'text': "So I'm going to just paste this in and just quickly go over it.", 'start': 1108.456, 'duration': 2.603}, {'end': 1112.7, 'text': "It's not much.", 'start': 1112.08, 'duration': 0.62}, {'end': 1118.442, 'text': "So basically, the user card, we're just adding a font family, a gray background.", 'start': 1113.2, 'duration': 5.242}, {'end': 1119.402, 'text': "We're setting the width to 500.", 'start': 1118.462, 'duration': 0.94}, {'end': 1125.284, 'text': "We're going to use the grid so that the image, you can see the image is going to be one grid item.", 'start': 1119.402, 'duration': 5.882}, {'end': 1128.565, 'text': 'And then this whole div with everything else will be another grid item.', 'start': 1125.384, 'duration': 3.181}], 'summary': 'Adding javascript to toggle and style user card with grid layout', 'duration': 50.765, 'max_score': 1077.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1077800.jpg'}], 'start': 701.35, 'title': 'Creating web components and styling', 'summary': 'Covers creating an html template, adding styling, and utilizing shadow dom for isolation. it also includes creating a user card web component with specific details and styling using grid layout and button for interactivity.', 'chapters': [{'end': 868.552, 'start': 701.35, 'title': 'Creating html template and styling', 'summary': "Discusses creating an html template, setting its inner html, adding styling, and utilizing shadow dom to isolate the styling to the web component, with examples such as setting h3 style color to coral and utilizing query selector to manipulate the template's content.", 'duration': 167.202, 'highlights': ['The chapter discusses creating an HTML template, setting its inner HTML, adding styling, and utilizing shadow DOM to isolate the styling to the web component.', "It includes examples such as setting H3 style color to coral and utilizing query selector to manipulate the template's content."]}, {'end': 1151.462, 'start': 869.112, 'title': 'Creating user card component', 'summary': 'Covers creating a user card web component with an image, name, email, and phone number, including styling with grid layout and button for interactivity.', 'duration': 282.35, 'highlights': ['Creating a user card web component with an image, name, email, and phone number The chapter demonstrates creating a user card web component with an image, name, email, and phone number, showcasing the use of attributes to pass in a URL for the avatar.', 'Styling the user card using grid layout and CSS The chapter covers styling the user card with grid layout and CSS, including setting the width, using grid for layout, and adding styles for the image, text, and button.', 'Adding interactivity with a button to toggle user information The chapter explains the addition of a button for interactivity, demonstrating how to toggle user information with JavaScript and change the button text based on the state.']}], 'duration': 450.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo701350.jpg', 'highlights': ['Creating a user card web component with an image, name, email, and phone number showcasing the use of attributes to pass in a URL for the avatar.', 'Styling the user card with grid layout and CSS, including setting the width, using grid for layout, and adding styles for the image, text, and button.', 'Adding interactivity with a button to toggle user information, demonstrating how to toggle user information with JavaScript and change the button text based on the state.', 'The chapter discusses creating an HTML template, setting its inner HTML, adding styling, and utilizing shadow DOM to isolate the styling to the web component.', "It includes examples such as setting H3 style color to coral and utilizing query selector to manipulate the template's content."]}, {'end': 1733.107, 'segs': [{'end': 1196.515, 'src': 'heatmap', 'start': 1157.828, 'weight': 0.813, 'content': [{'end': 1164.534, 'text': 'OK now I want to show you how we can use slots to add this the email and phone or add anything we want.', 'start': 1157.828, 'duration': 6.706}, {'end': 1173.622, 'text': "So within our user card here just to go to this first one here and let's just put in anything we'll just say hello.", 'start': 1164.955, 'duration': 8.667}, {'end': 1184.406, 'text': "OK, now this isn't going to show anywhere in here, but if I go to my template and in this paragraph right here,", 'start': 1175.779, 'duration': 8.627}, {'end': 1188.409, 'text': "I'm going to use slot like this and save.", 'start': 1184.406, 'duration': 4.003}, {'end': 1193.953, 'text': "And now you'll see that it says hello just for the first one, because that's the only one that we that we dealt with.", 'start': 1188.769, 'duration': 5.184}, {'end': 1196.515, 'text': 'In fact, let me just comment that out for now.', 'start': 1194.014, 'duration': 2.501}], 'summary': 'Demonstrating the use of slots to add email and phone in a user card template.', 'duration': 38.687, 'max_score': 1157.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1157828.jpg'}, {'end': 1221.043, 'src': 'embed', 'start': 1197.356, 'weight': 0, 'content': [{'end': 1205.198, 'text': 'So if you just have one thing that you want to put inside here, you can just put whatever you want and then just use slot.', 'start': 1197.356, 'duration': 7.842}, {'end': 1207.339, 'text': 'Now we have two things that we want to add.', 'start': 1205.258, 'duration': 2.081}, {'end': 1209.66, 'text': 'We want to add an email and a phone.', 'start': 1207.379, 'duration': 2.281}, {'end': 1215.441, 'text': 'So what we can do is inside here, instead of just putting hello or whatever an email,', 'start': 1209.72, 'duration': 5.721}, {'end': 1221.043, 'text': "we're going to add a div and we're going to give it a slot attribute.", 'start': 1215.441, 'duration': 5.602}], 'summary': 'Demonstrates adding email and phone using slot attribute.', 'duration': 23.687, 'max_score': 1197.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1197356.jpg'}, {'end': 1345.058, 'src': 'embed', 'start': 1319.049, 'weight': 3, 'content': [{'end': 1325.893, 'text': 'if you want to add some cool animations or just absolutely anything, you can put in your your web component.', 'start': 1319.049, 'duration': 6.844}, {'end': 1328.054, 'text': 'I just wanted to give you a pretty simple example.', 'start': 1325.933, 'duration': 2.121}, {'end': 1333.773, 'text': 'Now, this button here has an idea of toggle info.', 'start': 1329.972, 'duration': 3.801}, {'end': 1339.395, 'text': "Right So we're going to need to have an event listener on that button.", 'start': 1333.993, 'duration': 5.402}, {'end': 1345.058, 'text': "And we're going to put that event listener is in a lifecycle method called connected callback.", 'start': 1340.116, 'duration': 4.942}], 'summary': 'Adding animations and event listeners to web components for enhanced functionality.', 'duration': 26.009, 'max_score': 1319.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1319049.jpg'}, {'end': 1685.925, 'src': 'embed', 'start': 1655.628, 'weight': 1, 'content': [{'end': 1658.351, 'text': 'This is an introductory to web components.', 'start': 1655.628, 'duration': 2.723}, {'end': 1660.193, 'text': "I'm just going to get rid of this hello world.", 'start': 1658.631, 'duration': 1.562}, {'end': 1662.215, 'text': "We don't need that anymore.", 'start': 1660.233, 'duration': 1.982}, {'end': 1665.298, 'text': 'And we can also get rid of this style here.', 'start': 1662.235, 'duration': 3.063}, {'end': 1670.443, 'text': 'I just wanted to kind of show you the encapsulation of the shadow DOM.', 'start': 1665.939, 'duration': 4.504}, {'end': 1674.387, 'text': 'But anyways, I mean, yeah, so hopefully you learned something here.', 'start': 1671.004, 'duration': 3.383}, {'end': 1682.181, 'text': 'You can create your custom elements, you can pass in attributes and you can use these slots to add content inside.', 'start': 1674.788, 'duration': 7.393}, {'end': 1685.925, 'text': 'you know, create your class, your template.', 'start': 1682.181, 'duration': 3.744}], 'summary': 'Intro to web components, covering shadow dom and custom elements.', 'duration': 30.297, 'max_score': 1655.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1655628.jpg'}], 'start': 1152.282, 'title': 'Using web components for interactive elements', 'summary': 'Demonstrates the usage of slots in a web template to dynamically add content such as email and phone numbers and explains how to create interactive web components using web components, emphasizing encapsulation using the shadow dom, demonstrating the use of lifecycle methods such as connected callback and disconnected callback, and highlighting the toggle functionality and event handling within the web component.', 'chapters': [{'end': 1319.049, 'start': 1152.282, 'title': 'Using slots and events in web templates', 'summary': 'Demonstrates the usage of slots in a web template to dynamically add content such as email and phone numbers, with an example of adding events to hide information on a button click.', 'duration': 166.767, 'highlights': ['The chapter demonstrates the usage of slots in a web template to dynamically add content such as email and phone numbers. The transcript discusses how to use slots within a user card to add content dynamically, showing an example of adding an email and a phone number using slots and the slot attribute.', 'Example of adding events to hide information on a button click. The chapter concludes by showing how to add functionality to hide information by clicking a button, emphasizing the flexibility of events in web templates.']}, {'end': 1733.107, 'start': 1319.049, 'title': 'Web components: creating interactive web elements', 'summary': 'Explains how to create interactive web components using web components, emphasizing encapsulation using the shadow dom, demonstrating the use of lifecycle methods such as connected callback and disconnected callback, and highlighting the toggle functionality and event handling within the web component.', 'duration': 414.058, 'highlights': ['The chapter explains how to create interactive web components using web components. The chapter focuses on creating interactive web components using web technologies.', 'Emphasizing encapsulation using the shadow DOM. The chapter emphasizes encapsulation using the shadow DOM to encapsulate styles and functionality within the web components.', 'Demonstrating the use of lifecycle methods such as connected callback and disconnected callback. The chapter demonstrates the use of lifecycle methods, including connected callback and disconnected callback, to manage the behavior of the web component upon insertion and removal from the DOM.', 'Highlighting the toggle functionality and event handling within the web component. The chapter highlights the implementation of toggle functionality and event handling within the web component, allowing for interactive behavior such as toggling content visibility and changing button text.']}], 'duration': 580.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PCWaFLy3VUo/pics/PCWaFLy3VUo1152282.jpg', 'highlights': ['The chapter demonstrates the usage of slots in a web template to dynamically add content such as email and phone numbers.', 'The chapter explains how to create interactive web components using web components.', 'Emphasizing encapsulation using the shadow DOM.', 'Demonstrating the use of lifecycle methods such as connected callback and disconnected callback.', 'Highlighting the toggle functionality and event handling within the web component.']}], 'highlights': ['Web components provide an organized UI of components, allowing for encapsulation and reusability.', 'Custom elements allow the creation of custom HTML tags and the extension of existing tags.', 'The three main building blocks of web components are custom elements, the shadow DOM, and HTML templates.', 'Creating a user card web component with dynamic content, including an avatar, user image, name, phone, email, and a button for interactivity.', 'The shadow DOM allows us to encapsulate all of our markup and our styles in our custom element, ensuring self-containment and separate styling from the global CSS.', 'Styling within the shadow DOM ensures that the styles are not affected by any global styles on the web page, providing scope styles and maintaining the specified style for elements like H3.', 'Using HTML templates and slots for dynamic content within the web component is explained, allowing for the inclusion of both HTML and CSS as well as the addition of custom text.', 'Creating a user card web component with an image, name, email, and phone number showcasing the use of attributes to pass in a URL for the avatar.', 'Styling the user card with grid layout and CSS, including setting the width, using grid for layout, and adding styles for the image, text, and button.', 'Adding interactivity with a button to toggle user information, demonstrating how to toggle user information with JavaScript and change the button text based on the state.', 'The chapter discusses creating an HTML template, setting its inner HTML, adding styling, and utilizing shadow DOM to isolate the styling to the web component.', 'The chapter demonstrates the usage of slots in a web template to dynamically add content such as email and phone numbers.', 'The chapter explains how to create interactive web components using web components.', 'Emphasizing encapsulation using the shadow DOM.', 'Demonstrating the use of lifecycle methods such as connected callback and disconnected callback.', 'Highlighting the toggle functionality and event handling within the web component.']}