Styling Web Components with Shadow DOM: CSS variables, parts, shared styles
Channel: vaadinofficial
Date: 2020-12-09

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


Links: 
Source: https://github.com/marcushellberg/lit-element-styling
CSS parts: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
CSS variables: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Styling Vaadin components: https://vaadin.com/docs/v14/themes/styling-components.html
Vaadin Lumo CSS variables: https://vaadin.com/docs/v14/themes/lumo/customization.html
Vaadin Discord chat: https://vaad.in/chat