import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Chat With Lit #1 - Westbrook Johnson (Adobe)

<SocialEmbed platform="youtube" id="it-NXhxkOJo" />

## Description

Chat With Lit is the Lit team's live-recorded Twitter Space series hosted by Rody Davis (@rodydavis) and Elliott Marquez (@techytacos) from Google.

This is the first Twitter Space featuring Westbrook Johnson (@WestbrookJ) from Adobe.

Follow the Lit Twitter account at https://twitter.com/buildWithLit to join in live at the next Space!

## Transcript

### Intro

**0:01** · cool i see westbrook join uh can you hear us okay that seemed to work awesome yeah sorry for that everyone it uh totally just did not work as expected even though we scheduled it but awesome um super excited to invite everybody to this first lit space we have some cool topics

**0:24** · and an awesome guest um westbrook from adobe would you mind introducing yourself yeah hi everybody i'm westbrook johnson and i am a web components aficionado a lover and developer and sometimes hair pull router i work with adobe where i lead the spectrum web components project but i am also a part of a couple really cool projects both the open wc and modern web were

### About Westbrook

**0:58** · a really great group of open source projects and developers as well as the web components community group which is a newer initiative to bring together web components developers across all of the frameworks and base classes so that we can have a you know a bigger voice in the broader javascript community oh that's really cool um so how did you start with the working group um yeah could you tell us a little bit more about that uh well it's important or i i think it's

### Working Group vs Community Group

**1:30** · kind of important i think the w3c maybe thinks it's a little more important to to differentiate between working group and community group uh but i don't actually know the full difference other than we don't write specs but the community group got started just before the end of last year a bit of a response to a really

**1:53** · thoughtful blog post that went around around the the promise of web components by leah vareau and it started a really great conversation about you know are we as a community really coming together to to tell the story and of the benefits and the tribulations and the possibilities of web components in a way that sort of aligns with the

**2:22** · bright future that was maybe sold to the community you know over the last eight or ten years depending on how long you've had your ear to the ground on web components wow that's really cool um yeah i know it's been a cool group to kind of be a part of and kind of help with all of that um so how did you discover lit um what's like kind of your history with using lit and what you use it for and what you like about it yeah

### Westbrooks Lit Experience

**2:50** · so i've actually used lit for a while now i actually i got started with web components early on in the polymer project days uh right before 1.0 actually and so i've been following it for a good long time i started working in applications and at the time when lit first came out i was working on a video chat application and

**3:19** · sort of pairing it with things like firebase and some of the sort of last vestiges of the polymer library i found really great success and it's been really cool seeing the ease with which doing things like that has increased as the community has really expanded and the sort of tooling foundation to you know both develop as well as test as well as release and maintain has expanded

**3:48** · yeah for sure i uh yeah i've liked lit because of just like how small it is it makes it really easy to you know kind of build these like reusable blocks and i didn't actually didn't use polymer i actually joined right when uh right when lit was a thing oh yeah uh you were were you working with web components before or nope i actually joined right as web components were actually officially supported on all browsers so oh you you're like a sweet summer child there yeah exactly

### Web Components

**4:23** · uh yeah so maybe we should do a little bit of a introduction for reading cool yeah so my name is rhody i am a developer advocate for material design uh and then i'm elliot i am a software oh sorry sorry we're in the same room we're finally working from the office maybe we can figure that out in a bit but uh yeah i'm elliot i'm a software engineer on the uh i was let's say polymer team on the lit team and material design as well um and uh

**4:54** · yeah cool and uh could you introduce yourself one more time with for anybody that just joined yeah i'm westbrook and i am a lead developer on the spectrum web components project at adobe awesome very cool so another thing

**5:14** · we could talk about is maybe maybe ways than you were kind of utilizing some of let's uh maybe most recent features and that can kind of be up to you but just curious um yeah what you're what you're using right now that uh maybe people might be interested in

**5:34** · yeah uh that's a really exciting question because there are so many new features coming to lit 2.0 however it's also a little bit of a like i'm about to get their question in that

**5:53** · spectrum web components supports a lot of as yet to be released but rather large projects and at their size it's a little difficult to move to the rc that that that lit is on

**6:09** · but we're starting to look at a number of the patterns um even in like sort of bridge implementations one of one of which is the the context uh sort of resolution via uh the directives um and and really hanging that off of elements via the um uh

**6:34** · the name just jumped out of my brain via the the controller api oh yeah the reactive controller the reactive the the reactive controller api which uh makes it really easy to to both situate a context in your tree

**6:49** · but also um you know educate your component how to resolve its context uh yeah throughout the tree yeah speaking of do you prefer writing typescript with this or you use javascript and if you use typescript do you like using the decorators so i do use typescript and it makes it really cool to use the decorators because i think that that sort of approach is really really smooth and i really hope that the relatively

### decorators

**7:20** · sun shiny news i've heard from uh from the ecmascript body about decorators maybe gets that into the main body fingers crossed like i don't know if i had like 10 more fingers i'd cross them five more times oh yes for sure

**7:39** · uh oh i'm circling back just a little bit with uh with uh reactive controllers um it's i feel like it's one of the lit two and i was wondering like is there any cool use case that you've actually been using them for in uh either at work or personal projects or anything of sort

**8:01** · yeah so i've i've used them uh for a couple in my research via personal projects for what will be um hopefully actual features at adobe in the future uh one place where i i really like it is i've used it to build my own slide deck

**8:24** · and pair it with uh some uh some animation uh libraries to be able to make the slides animate really beautifully with uh with physics not just with css animations

**8:41** · yeah it's pretty cool uh i was uh uh talking to one of our uh material web engineers and uh liz if anybody knows her and uh she was actually doing this really cool thing on how to like automate accessibility per role by making like a controller for like combo box or controller for like big button and stuff like that um i

**9:03** · just think i don't know i really think it's a cool idea like uh controllers to like declaratively add all these features and bundle them up so really excited to see where that goes yeah the rest of the community takes it yeah i think that's that's really cool at adobe are one of our not lit client side

### modularity

**9:25** · projects has done a lot of work with with modularizing things like accessibility features for use across multiple contexts like that and we're we're really excited for once we were able to get to lit uh 2.0 so that we could start looking at using that similar modularization strategy for both for accessibility features but also some of the shared state contexts that come up really really often in a component library

**9:55** · like a spectrum my components but also like in the application context that we're leveraging spectrum web components yeah speaking of theming do you have a preferred method for styling your web components yeah ah well it's interesting i have some preferred opinions um

**10:20** · that i that i might use if i were to be developing from a project from scratch uh and i would love to be able to get this into spectrum web components a little more often things like css parts and the like but we're actually at a really interesting \[Music\] location in the spectrum spectrum is adobe's design system the spectrum ecosystem wherein

**10:45** · there is another ui client-side javascript ui framework that outputs spectrum components and both of our projects consume a pre-existing css library that outlines um the uh

**11:05** · the spectrum design system for web if you will and that system is structured all around css custom properties and it actually uses a really great sort of central set of tokens to be able to

**11:24** · populate the the entire component eco system uh with whether you're talking about dark versus light themes or you're talking about large versus small scales or also we do a lot of work to ensure that we support right to left as well as left to right text and the css custom property system that they've set up is the basis for that in our application

**11:53** · that's pretty cool talking about styling have you had any uh interesting uh applications for different types of like you're using css custom properties as like the basis i was wondering if you have any interesting use cases but for like uh shadow roots uh i mean the shadows um for what is it called uh part uh like colon colon part uh for selecting certain things are y'all mostly staying away from that or is that for like one-offs yeah so

### adding parts

**12:24** · the the broader system as i said is structured before it becomes part of our project so including parts in the system is not something that it would it would involve us deviating from the larger spectrum community uh but one place where we have just brought parts into the library i feel like you're like watching my

**12:50** · github is uh we have a we have a theming system so that uh that allows us to switch on as that sort of core set of css custom properties uh and so it's an element that takes the the scale and the color stops

**13:09** · and the text direction and then decides what css custom properties should be available to the page at that time oh that's interesting yeah and so it works really well like if you're in an app and you're not trying to do anything like defeat css layering or uh css clip uh border clipping uh but

**13:33** · almost every application we have has some sort of overlays and they every overlay has to escape those things to be displayed correctly and so we're we're throwing that part of the dom to the end of the body to ensure that we're getting rz indexing and and what not correct when that happens but when we do that we're actually throwing the content outside of our of our theme and so we kind of

**14:03** · resolve the theme context before we throw the the content and then we throw the content and when the content gets to its new location it wraps itself in a new um team scope but some of our users

**14:18** · had found that if they were creating their own css custom properties hang off of the initial theme that the main application was in those custom properties we're not following the the thrown content to the end of the body yeah and so we we realized that uh this is actually the perfect place for park because you could assign a theme part to this

**14:45** · this theme provider that we're creating in the overlay context and be able to just use uh overlay colon colon part theme and app colon colon part theme and any of your custom css custom properties there's probably a better way to say that then apply to both places whether it's your main application or this thrown content and it's it's it's looking like a really nice way to be able to build the app specific

**15:15** · customizations inside of the spectrum specific application that we're helping ship um i i do remember when uh part was under development that there was a pair to it uh colon colon the theme and essentially that was essentially a shadow part that would uh

**15:36** · cascade through shadow roots similar to custom properties and how they do that um i was wondering uh from what i remember its current state is uh nobody's really working on it right now but they haven't really shut the door on it i was wondering do you think that could fit anywhere inside your current setup or something of the sort i you know i whether it fit inside of my setup or not i think is a little

### web components community

**16:03** · unclear but if that were something that was to start to land i would definitely want to find a way to do so because i think there there's this really interesting combination when you get in that i found when you get into component libraries and pattern ecosystems where you want to be able to use pieces over

**16:27** · and over again but you don't always want them to be components they don't always need to be components and because of like and right now that's like our easiest way to create a movable piece of of ui but if we were able to have that theme that pierced through the whole shadow

**16:50** · down stack and pointed to these specific parts all throughout your ecosystem you could have these smaller dom snippets that had visual mobility and and equality without having to nest always lean on a full custom element to do so um and i think

**17:12** · that uh you know that touches a little bit on something that that we're going to be looking at in the next couple of months with web components community group and that's that the the one sort of responsibility for the w3c of a community group is to publish reports on the community and uh we want to bring together a list

**17:35** · of pain points and a list of sort of orphan specs and a list of maybe future uh requests as a as a broader web components community not necessarily just lit but there's definitely a lot of lit voices in the conversation uh and uh and present that sort of unified front to the working group and the actual browser and vendors so that we can maybe whether it's theme and starting the conversation again about that or it's a new specification that gives

**18:07** · similar or better maybe even capabilities around theming uh so definitely check out the the community group we have a slack channel and and join the conversation if you are also a fan of uh do you have a good way to for people to join that like a super short link or wow i i how does this sort of radio setting is very interesting uh and so i i can i will share something

**18:40** · out as soon as yeah we can always uh pin a tweet or send something out later yeah it's like a follow-up this is a like brand new uh uh realm for me my first space by the way thanks for having me and ours too yeah thanks for joining yeah i mean uh i guess the show notes are just our twitter thread so \[Laughter\]

**19:05** · yeah um yeah like we said we're definitely going to put everything on slack and everywhere else so make sure to stay tuned for that um any final things you want to say about lit um so it

### no magic

**19:21** · it was interesting like thinking about like being a part of this conversation today i i was i was running into a problem uh in one of my components and i was like oh man i'm gonna have like a bunch of negative energy going into this conversation and then i i i realized one of like my favorite things of web components in general but also very specifically to lips and that's that there's very little magic and i dug in and what i had been using

**19:52** · as uh a decorator i just rewrote quickly as a getter setter pair and i was able to track the origin of like a property being double set that i couldn't figure the source of and it was just really great when i was like stop just like clicking around and like console logging around and realize i have full control

**20:17** · over the the context that i'm i'm writing in there's there's no black box there's no compile to function calls there's no magic really and it made it made me realize that even when i'm having hard days you can get right to the source really quick and that feels really good yeah it's

**20:41** · really great to hear um i'm sorry uh but like i feel like that's one of the hard line difficult type ropes that we have to walk where it's like provide enough developer tooling but make sure you don't like lose the note you know like yeah you wanna you wanna make sure that people still know exactly what this is doing and uh but then again we don't want people writing just dong calls everywhere right um but it's really good that uh

**21:09** · uh you picked up on that and enjoyed that not that lit can't have magic we do uh make sure that we write things in such a way that you can change you can change the renderer to react if you really wanted to and use reactive element uh under the hood and stuff like that and write your jsx if that's what you want um or uh or just use relational in and

**21:31** · of itself so it's pretty good um i guess one thing i wanted to ask you is uh what is your favorite component you've come across that you feel like it's just uh fun to use and work with whether one you built or when you found the community wow uh that's a a great question name your favorite child right now sam it's definitely sam

### favorite component

**21:59** · so it's hard to say one component unless you're thinking like an application component for me uh but uh one i think component family maybe if that helps that i think really she does a great job of of both approving

**22:18** · the benefits of web components and and i apologize it's not a lit project but it's as close to lit as you can get because it is just vanilla web components and that's the generic components by uh by one of my fellow open wc members

**22:38** · pascal's ship oh yeah gotta love gotta love get a little open wc and pesco yeah um but uh his generic components project uh works to just have the simplest implementation of some uh

**22:55** · of the sort of gnarly accessibility patterns that would come up on the web as web components with just really simple paths to customizing their visual delivery and they're all vanilla and they're all super small and we recently attempted to challenge twitter and i think we're on twitter uh to maybe start a bit of like a style

**23:18** · stage or a css zen garden of customized implementations of it so if you're a big fan of styling and a big fan of uh really cool components uh definitely check those out very cool yes and uh it's all about finding web components wherever they are and whatever they're built with because that's one cool thing about this ecosystem is once you create it you can just share it with other people disintegrate it

### outro

**23:46** · yeah absolutely well i just wanted to thank you so much for joining us westbrook and also elliot um and everyone that joined in to our first twitter space sorry for all the troubleshooting at the beginning but uh yeah sometimes things don't work as expected but yeah please feel free to reach out to us and let us know what you thought if you have any questions and of course if you ever want to hear more about lit definitely reach out thanks again westbrook and hope to see you on the web yeah thanks

**24:17** · for having me bye