Why is my Web Component inheriting styles?
Tags: webcomponents
Published: 2019-04-01 20:18:31

---
title: Why is my Web Component inheriting styles?
published: true
tags: web components
canonical_url: https://blog.lamplightdev.com/2019/03/26/Why-is-my-Web-Component-inheriting-styles/
---

One of the great features of the Shadow DOM in Web Components is that styles are encapsulated to the component - you can style your component without worrying about any specifier (`id`, `class`, etc.) conflicts or styles ‘leaking out’ to other elements on the page.

This often leads to the belief that the reverse is true - that styles outside of the component won’t cross the Shadow boundary and ‘leak in’ to your component. However this is only partly true.

While _specifiers_ do not leak in to your component (e.g. a color applied to an `p` element in a style rule outside of your component won’t effect any `p` elements in your Shadow DOM, although the rule will be applied to your Light DOM, or slotted content), _inheritable styles_ applied to any elements containing your component will be applied to both your Shadow and Light DOM.

### Inheritable styles

Inheritable styles are those that are defined on a parent that are then inherited by child elements. The most obvious inheritable styles are those defined on the `html` and `body` tags. Taking `color` as an example, if there is a `color: green` set on the `body` (which is a container for every element on the page), this will be inherited by all elements on the page, including Web Components, unless overriden by another more specific rule.

Inheritable styles are necessary so we don’t, for example, have to write a `color` rule on every element. But not all styles are inheritable, otherwise a `border` style on one element would be inherited by all its children:

<!-- Copy and Paste Me -->
{% glitch uttermost-leaf %}

Rules set in the Shadow DOM act in the same way - inheritable styles are applied to all children (Shadow and Light DOM), so adding a `color: red` to our Shadow DOM:

<!-- Copy and Paste Me -->
{% glitch sprout-caraway %}

### The chosen ones

So which styles are inheritable, and which are not? Well these are all defined by the [CSS spec](https://www.w3.org/TR/CSS22/propidx.html#q0). The most common ones are:

- `color`
- `cursor`
- `direction`
- `font`
- `font-*` (`font-family`, `font-size` etc.)
- `letter-spacing`
- `line-height`
- `text-align`
- `text-indent`
- `text-transform`
- `visibility`
- `word-spacing`

So that’s why these styles _do_ leak into your Web Component.

### What if I don’t want my component to inherit from its parent?

Well you’re in luck, you can reset all inheritable styles for a component (Shadow and Light DOM) using `all: initial`, which resets the styles back to the CSS defaults or those defined in the browser ‘user agent stylesheet’. Note that outside specifiers matching in the Light DOM will not be reset.

{% glitch sticky-tartan %}

### What if I want to style my component from outside?

Well that’s where CSS custom properties come in, along with the new `::part` and `::theme` pseudo-elements, and I’ll cover that in an upcoming post.

If you have any feedback or questions I’d love to hear them [@lamplightdev](https://twitter.com/lamlightdev.com).

[Subscribe to the mailing list to be notified of new posts about Web Components and building performant websites](http://eepurl.com/gvjFwv)