Skip to content
On this page

Inheritable styles pierce the Shadow DOM

As pointed out in earlier sections, the Shadow DOM behaves like an <iframe> in its encapsulation. The Shadow DOM inherits some of the same quirks in the form of inheritable styles. Inheritable styles are styles that inherit the styles from their parent.

Here's a list of inheritable styles:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing
  • word-wrap

You can see that most of these fall under the umbrella of text, list, or table formatting; situations where you'd expect an embedded <iframe> or child content to have a similar look and feel as the parent.


As shown by this example, the color value passes through to the Shadow DOM markup, but the font-family on the <button> is not passing. This is – in part – due to the unique aspects of <button> being a replaced element, but demonstrates that while inherited styles do pass down, there are still limitations with this approach.


Licenced MIT