Learn to create a Shadow DOM structure using the tag that was introduced earlier in the course.
Let's add some code to define the structure…of the message banner element.…Going to have it splay as a div…and I'm going to say the ID is content…and the class is message…and inside the div I'm going to put my slot tag.…Now I need to change my code that attaches the shadow root…to get the HTML from the template instead of…the hard coded string.…Let's scroll down and do that, and that's right here.…
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