Building a Shared Component Library in Lit

Multiple teams, using multiple JS frameworks, shipping multiple applications, but you want them all to have the same look and feel. Shared CSS is easy enough, but what about more complex/structured components like cards, notices, toasts (or snackbars depending on your lingo), etc. As an example, maybe you're using material design, and think you can just rely on each frameworks implementation. What if a framework doesn't have a material implementation? I can tell you from experience that the look and feel of each material library varies greatly across frameworks. How do you build a component library that's useable across all of the frameworks you might have to deal with?

The answer is: Lit. It compiles to completely standards-compliant web components, has reactive state, and is incredibly small. Every framework can utilize web components, and with the recent end of IE11 support there is no worries about browser compatibility. In this session we'll cover some of the basic features of Lit, and even live code a component from scratch to demonstrate how simple it can be to spin up a shared component library that everyone can use.