Learn how custom elements give developers the ability to create new HTML tags that behave just like the ones that are built into the browser, and make it easier to create complex applications while minimizing code.
- [Instructor] One of the more exciting features…of web components is the ability to define…entirely new HTML tags.…By defining new tags that have associated functionality,…you can dramatically reduce the amount of code…you have to write when building your apps.…And it's not hard to imagine a scenario…where this ability would be immensely useful.…So, let's consider an example.…Now, this is a screenshot…of the email composition window in Gmail…and it looks pretty simple, right?…It's basically a box with some edit areas…for recipients and subject and the body of the text…along with some button controls,…but let's take a look at the source code…behind this seemingly simple window.…
Look at how complex this HTML code is.…There are multiple div tags nested inside other div tags,…each with different CSS classes assigned,…and this isn't even all the markup.…I've collapsed several of these elements…in order to make the code fit in here.…And this happens pretty often in modern web development.…In order to create complex user interfaces,…
Joe Marini starts the course by going into HTML templates, which provide a browser-native way to declare sections of HTML markup that will be used frequently in your app. Next, he covers HTML imports, explaining how to use them and create reusable modules. Then, he takes you through working with custom elements. To wrap up the course, he discusses Shadow DOM and how to create Shadow DOM to define custom element structure and rendering within a page.
- Web standards
- Customizing web components
- Activating and using templates
- Using HTML imports
- Creating reusable modules
- Defining custom elements
- Customizing elements and styles
- Creating Shadow DOM
- Styling and Shadow DOM