Reusing Styles Across Components

This is a premium lesson.

Subscribe to get access to the entire course.

As you start styling your components, you’ll probably want to define the same CSS rules across every component.

Here’s a really common CSS rule defined in nearly every web development project.

* {
	box-sizing: border-box;
}

And while the effect of the rule isn’t important for this lesson, you might find that you want to apply this rule, and others to every single component.

Chances are that this rule is defined in a CSS reset imported in the light DOM, but annoyingly, your components can’t inherit those styles. You could go ahead and define it manually in each component, but now you’ve got a lot of repeated code.

Let’s go over some ways to share styles across components.

Constructible StyleSheets

Constructible StyleSheets are a way for us to manually create a CSS stylesheet and then attach those styles to a specific DOM subtree.

You can create a single instance of your shared styles, store it as a CSSStyleSheet, and then access it from within your web component.