Styling LitElement views part 2: global styles and CSS modules (Vaadin Fusion)
Channel: vaadinofficial
Date: 2020-12-23

In this video, Marcus walks you through configuring global styles and CSS modules in a LitElement based Vaadin Fusion project. We take a look at configuring webpack and TypeScript plugins, creating a base view class that turns off shadow DOM, and finally two ways of scoping styles in views. 

0:00 - Intro
0:36 - App walkthrough
1:03 - Installing style-loader and typescript-plugin-css-modules
1:20 - webpack configuration
2:19 - Type definitions
2:33 - tsconfig.json plugin configuration
2:54 - Configuring the TS version to use
3:44 - Defining global styles
5:00 - Creating a View base class and turn off shadow DOM
6:06 - Defining view specific styles
8:36 - Using CSS modules for view styling
 

Project source: https://github.com/marcushellberg/lit-css-modules
Vaadin Discord Chat: https://vaad.in/chat