This tutorial covers styling LitElement based web components that use Shadow DOM: how to style components that are inside other components. Shadow roots encapsulate the component CSS, which means you need to think about CSS in a different way. The tutorial covers CSS Custom Properties (variables), CSS parts, and how to share style sheets between components.

0:00 - Intro
0:24 - App overview
0:59 - Styling LitElement web components
1:48 - Designing an API for styling components with Shadow DOM
2:59 - Disabling the shadow root
4:04 - Using CSS Custom Properties and default values
5:57 - Using CSS parts for styling
7:50 - Styling Vaadin Components using parts
8:42 - Shared styles between components: importing and loading a CSS style sheet

Source: https://github.com/marcushellberg/lit-element-styling

Subscribe : https://www.youtube.com/channel/UCsGakFIbOsj-fgPFLf1QlQA

#css #dom #web-development