Styling Components: Dynamic Styles

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

You should be familiar with applying static styles to your components at this point, but what about styles that can change? You might want to apply different classes under certain conditions, or compute styles dynamically. Let’s take a look at a couple of scenarios, and see how we can work with Lit’s API to apply dynamic styles.

We want to apply known styles under different circumstances

You might want your component to accept properties, like a variant, a size, or whether it’s displayed. You want to then use those properties to change the appearance of your component.

<odyssey-button variant="primary" size="md" hidden>
	Click me
</odyssey-button>

The implementation for the button might look like this:

export class OdysseyButton extends LitElement {
	static styles = css`
    button {````