From the course: Learning Web Components
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Styling and Shadow DOM
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.