Understand how styles work within Shadow DOM, and how custom elements can style themselves by default using the :host element selector.
- [Instructor] There are several ways…to apply styles to web components.…Styles that are defined in the host page can be applied…to custom elements using the tag name selector,…just like any other HTML tag,…components that use Shadow DOM can define their own…internal styles, and components can expose style hooks…via CSS custom properties to override internal defaults.…For example, you can style custom elements…just like you would any regular HTML tag,…just by defining a CSS style with the name of the tag.…
But a more self-contained way of defining styles…is to use the :host selector.…The :host selector can only be used within Shadow DOM,…and essentially applies the given style…to the custom element itself.…The :host selector can also be used with a filter…to apply styles when certain conditions are met,…such as the presence of an attribute, in this case disabled,…or when a particular class is applied,…in this case important.…Now one thing to note here is that styles defined…outside the element have a higher specificity…
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