Styling Components: Static Styles

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

So far we’ve seen a couple of ways to style a Lit component, one to add the styles directly within a <style> element inside the render function. The other is to add the styles to the static styles property. Let’s learn why you should prefer to use static styles.

Static Styles

If you’re creating a component, there’s a good chance that many of its styles will stay the same across multiple instances. Check this button out for example.

Even though I’ve rendered multiple buttons to the page, from a style perspective, they’re all identical. However, I’ve rendered the styles directly within the element’s HTML, like so:

return html`
	<style>
		# several lines of CSS here
	</style>
	<button>Press me!</button>
`;

This might seem like a reasonable thing to do, but doing this means that the CSS gets evaluated for every instance of the component. The browser needs to parse the exact same CSS styles every time a button component is rende