How can a page change a component’s colors without reaching into its Shadow DOM? A CSS variable—also called a custom property—lets you define a value with a name such as `--text-color` and use it with `var(--text-color)`. Custom properties can cross the shadow boundary, so a component can expose styling choices while keeping its internal rules encapsulated. section 10.2
Define a value, then use it
Set `--text-color: blue` on `body`, set it to `red` on a nested `.container`, and give `.child` the rule `color: var(--text-color)`. The child uses the value defined on its nearer container. In a Web Component, the same pattern works across the shadow boundary: set `--text-color` on `<sample-component>` and use `color: var(--text-color)` in its shadow stylesheet. section 10.2
For a small theme, put shared values on `:root`—for example, text color, label color, font, and heading size—then reference them in component styles. Changing those root values switches the appearance of several components without editing each rule. A larger design vocabulary can also name text sizes, colors, border widths, and border radius; slider, coordinate-picker, and color-picker styles can then use the same choices. section 10.2 section 11.4
Listing 11.15. CSS vars to use throughout a hypothetical app and our components
:root {
--text-xsmall: .5em; #1
--text-small: .7em;
--text-medium: 1em;
--text-large: 1.3em;
--text-xlarge: 1.5em;
--color-pureblack: black; #2
--color-black: #2a2a2a;
--color-lightblack: #4a4a4a;
--color-darkgrey: #6a6a6a;
--color-grey: #7a7a7a;
--color-lightgrey: #9a9a9a;
--color-darkwhite: #dadada;
--color-white: #fafafa;
--color-purewhite: #ffffff;
--text-color: var(--color-lightblack); #3
--text-inverted-color: var(--color-white);
--border-color: var(--color-lightblack);
--border-color-light: var(--color-darkwhite);
--border-inverted-color: var(--color-white);
--background-color: var(--color-white);
--background-inverted-color: var(--color-lightblack);
--border-radius: 6px; #4
--border-width-thick: 3px;
--border-width: 1px;
--padding-medium: 5px;
}
The root-level variable list shows how basic colors and text sizes become named choices, including values defined using other variables. section 11.4
Variables handle values, not every shared style rule. Importable CSS modules are another option for distributing common rules, such as input-field styling, among components. Shadow Parts are also being explored for component styling, but their proposed approach was still evolving. For IE11, CSS variables need additional support: the demonstrated `css-vars-ponyfill` setup loads the ponyfill and calls `cssVars()` when available. section 11.4 section 10.2 section 12.5
