Exercise: Reusing Styles Across Components

Very many frontend projects utilise tools like CSS Resets to ensure that all HTML elements have an established baseline with regards to their appearance. It might be to remove the browser default padding, set the default box sizing mode, or change the default layout algorithms for certain elements.

Annoyingly, these CSS rests won’t penetrate the shadow boundary, so it’s in our best interest as library authors to apply some basic quality of life web component styles.

With that said, we shouldn’t make assumptions about how our consumers have reset their CSS, but there are certain styles that we can set the baseline for.

That brings us to the exercise for this lesson. Using what you learned in the previous lessons, go into your long running project and make the following changes to your component library:

• Take the following CSS
• Define it in a separate file
• Use it in your component

:host,
:host *,
:host *::before,
:host *::after {
	box-sizing: border-box;
}

I won’t provide a solution video, but if you get stuck and need to find the solution, you can peek at the corresponding folder and see how I’ve implemented this behaviour.

To check that everything works as expected, add a red border in the CSS rule. Everything works as expect if your component looks like this: