To bundle styles with a component, create a style sheet in the component’s folder. The style sheet must have the same name as the component. The style sheet is applied to the component automatically.
Each component can have only one style sheet. Components can’t share style sheets. Style sheets use standard CSS syntax and you can use most selectors.
Styles defined in a component’s style sheet are scoped to the component. This rule allows a component to be reused in different contexts without losing its style. It also prevents a component’s styles from overriding styles in other parts of a page.
CSS Scoping Examples
This example demonstrates how the CSS styles defined in a parent component don’t reach into a child.
There are two components:
cssChild. Each component contains text in a
<p> tag. The
cssParent.css style sheet defines the
p style as
xx-large. The style applies only to the
<p> tag in the parent, not to the
<p> tag in the nested child.
A parent component can style a child component, but it styles it as a single element. A parent can’t reach into the DOM of a child. In the playground, add an
example-css-child selector to
cssParent.css that defines the background of the child component.
cssParent.css in the playground, scroll to the right in the left pane header and click the filename.
In a new playground, let’s style the
example-css-child component from its own style sheet,
A component’s style sheet can reach up and style its own element. Instead of using a
example-css-child selector, use the
Uncomment this code in
cssChild.css. By targeting the host element with
:host, we apply styling to
cssParent.css file in this playground doesn’t include the
example-css-child selector. It’s not a good practice to style components from both the component and its parent, because it can be confusing and yield unexpected results.
:host selector accepts an optional list of selectors. To match, the host element must have a class that matches the passed selector. To see how the
:host selector works, in a new playground, let’s rewrite our sample code to look slightly more like a real app.
p in the child component
x-large, which is just a notch smaller than the
p in the parent component. Make each item
whitesmoke except the active item, which is
Right now, the child component contains just a static title, To Do Item. Add a
cssChild.html so the parent component can pass to do item text.
In the parent, add three
example-css-child components and make one active. In a real app, the active component would be the selected item. Because
example-css-child contains a
<slot>, we can pass text for each to do item.
For more information about
<slot>, see Pass Markup into Slots.
Create Styling Hooks
To expose styling hooks for your custom components, use CSS custom properties. CSS custom properties also make code easier to read and update.
Document your component’s styling hooks as part of your component’s API. To change a component’s style, a consumer simply sets values for the styling hooks—they don’t need to know how you implemented the styles.
To define a CSS custom property in a component’s style sheet, prefix the property with
--. To insert the value of the property, use
CSS custom properties are inherited. Inherited properties pierce the shadow DOM. Some CSS properties, like
color, are also inherited. Because CSS custom properties are inherited, a consumer can set their values at a higher level in the DOM tree and style your component.
These CSS custom properties create styling hooks for two themes: light and dark. Pass the fallback value as an optional second parameter to
To view the CSS in the playground, click cssCustomProps.css.
In this playground, a component consumes the cssCustomProps component and sets values for its styling hooks to change the colors for the light and dark themes. To view the CSS in the playground, click cssCustomProps2.css, and experiment by setting new values for the custom properties.
Share CSS Style Rules
To share CSS style rules, create a module that contains only a CSS file. Import the module into the CSS file of any Lightning web component you want to style. You can import style rules from multiple CSS modules. The imported style rules are applied to the template just like non-imported style rules. Lightning Web Components supports the CSS cascade algorithm.
Create a Lightning web component that contains only a single CSS file. This component is your CSS module.
Just like with any Lightning web component, the folder name and the filename must be identical.
Import the module into the CSS file of a Lightning web component.
Imported style rules are applied to the template just like non-imported style rules. All style rules cascade. In the
cssSharing.html template, the text in the
<h1> tag uses the style defined in
For more information about
@import, see MDN web docs: @import. MDN lists two syntaxes:
@import url and
@import url list-of-media-queries. LWC doesn’t honor the
CSS Support and Performance Impact
The CSS scoping matches the CSS Scoping Module Level 1 standard, with a few exceptions.
- No support for the
id values for accessibility only. When the template is rendered,
Scoped CSS affects performance, so use it with care. Each selector chain is scoped, and each compound expression passed to
:host() is spread into multiple selectors. This transformation increases the size and complexity of the generated CSS. These increases mean more bits on the wire, longer parsing time, and longer style recalculation time.
To ensure CSS encapsulation, each element has an extra attribute, which also increases rendering time. For example, the
<example-parent> element has a
← ES ModulesComposition →