Consuming a separate stylesheet with Lit & TS

Pete Carapetyan — Sun, 19 Apr 2020 11:18:45 +0000

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.

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

DEV Community: Pete Carapetyan

Consuming a separate stylesheet with Lit & TS

Sometimes, you let an outsider in:

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

Benny Powers makes it possible: