DEV Community

Cover image for Consuming a separate stylesheet with Lit & TS
Pete Carapetyan
Pete Carapetyan

Posted on

Consuming a separate stylesheet with Lit & TS

Sometimes, you let an outsider in:

If the metaphor for LitElement coding practices was a club, then it would be a very exclusive club. Typescript, Web Component and browser standards, even commonly accepted libraries and coding practices are all pretty tightly adhered to by this club - if one thinks in that metaphor.

What you don't do is just bring in jquery or jsx or a bunch of legacy cowboy-coder stuff into a Web Component - at least by the ethic referenced above.

So it's a bit of a shock to think about bringing an external stylesheet into your otherwise locked down, and compact, typescript coded Web Component.

It's still more important to know when not to do this:

If you're using Lit and TS you're already not a cowboy coder - you would have never walked through that wall of fire in the first place.

So this article assumes you've thought about the many reasons not to bring in an external CSS file into your Web Component.

Alt Text

Benny Powers makes it possible:

Credits in the project itself - but if you want to combine Lit and TS and your own external CSS file in a Web Component you might find this project helpful.

Photo by fran hogan on Unsplash

Top comments (2)

dakmor profile image
Thomas Allmer

good thinking 👍

care to make the code image a code snippet so you can copy past it - I am lazy you know 😬

petecarapetyan profile image
Pete Carapetyan

yeah, that was just a teaser to add color to the blog text - no value at all without the rest of the repo :(