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.
Example
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.