One of the most powerful features of Web Components is using Shadow DOM & CSS Custom properties to achieve actual code sharing among your style guides & pattern libraries with your website and web application code. No more developing design systems in isolation and struggling to have design updates applied to the actual development code. The code you write in your Web Components is both the living pattern library and the code your components use!
In this talk you'll learn the specifics of working with Polymer and LitElement, the latest Web Components library from the Polymer team, to build your design system in a way that can be used across any web-enabled device. We'll cover best practices for working with CSS in Polymer & LitElement to ensure design and accessibility needs are met. We'll also demonstrate the best ways to deal with the limitations of the Shadow DOM & CSS Custom Property shims to support older browsers.
John Riviello created his first hypertext document on the Internet in 1996 and has been obsessed with building for the web ever since. He spends his days as Engineering Fellow and Lead Frontend Developer at Comcast, where he works on the Xfinity customer websites and web applications. He is a Google Developer Expert in Web Technologies and
the author of the LinkedIn Learning course “CSS to Sass: Converting an Existing Site.” In his free time, he prefers surfing waves over surfing the Internet.