CSS

To bind styles to a component, create a style sheet in the component’s folder. The stylesheet must have the same name as the component. The stylesheet is automatically applied to the component

You can only have one style sheet per component. Components cannot share style sheets. The stylesheet uses standard CSS syntax, and you can use most selectors.

The scope of the styles defined in the component style sheet is the component. This rule allows a component to be reused in different contexts without losing its style. It also prevents a component’s style from overwriting that of the rest of the page.

CSS Scoping Examples

This example demonstrates how CSS styles defined in the parent component do not affect the child component

cssParent.html

<template>
  <p>To Do List</p>
  <example-css-child></example-css-child>
</template>
​
Copy the code

cssParent.css

p {
    font-size: xx-large;
}
​
Copy the code

cssChild.html

<template>
     <p>To Do Item</p>
</template>
Copy the code

The parent component can set the style of the child component, but set its style to a single element. The parent cannot access the DOM of the child. In Playground, add an example-css-Child selector to cssparent.css to define the child component’s background

/* cssParent.css */
p {
    font-size: xx-large;
}
​
example-css-child {
    display: block;
    background: whitesmoke;
}
Copy the code

A component’s style sheet can reach and set the style of its own elements by using the :host selector.

:host {
    display: block;
    background: whitesmoke;
}
Copy the code

Creating style hooks

To expose style hooks for custom components, use the CSS Custom properties. CSS custom properties also make the code easier to read and update.

Record a component’s style hooks as part of the component API. To change the styles of a component, consumers simply set the values for the style hooks — they don’t need to know how you implemented the styles.

To define a CSS custom property in a component’s style sheet, precede the property with –. To insert the value of the property, use var()

:host {
    --important-color: red;
}
​
.important {
    color: var(--important-color);
}
Copy the code

CSS custom properties are inherited. Inherited properties penetrate the Shadow DOM. Some CSS properties, such as color, are also inherited. Because CSS custom properties are inherited, consumers can set their values and style components at higher levels in the DOM tree.

These CSS custom properties create style hooks for two themes: light and dark. Pass the fallback value as an optional second argument to var().

.light {
    background-color: var(--light-theme-backgroud-color, lightcyan);
    color: var(--light-theme-text-color, darkblue);
}
​
.dark {
    background-color: var(--dark-theme-background-color, darkslategray);
    color: var(--dark-theme-text-color, ghostwhite);
}
Copy the code

ssCustomProps.html

<template> <p class="light"> This UI has a light theme. Etiam hendrerit eros a nisi tristique accumsan. Donec imperdiet,  neque at eleifend semper, eros dolor sollicitudin odio, vitae suscipit augue tortor sed velit. </p> <p class="dark"> This UI has a dark theme. Maecenas eget felis congue, ornare justo ut, fringilla ex. Integer ante sapien, hendrerit congue sodales sit amet, fringilla vitae quam. </p> </template>Copy the code

cssCustomProps.css

.light {
    background-color: var(--light-theme-backgroud-color, lightcyan);
    color: var(--light-theme-text-color, darkblue);
}
​
.dark {
    background-color: var(--dark-theme-background-color, darkslategray);
    color: var(--dark-theme-text-color, ghostwhite);
}
​
Copy the code

In components, the CSS variable set to :host takes precedence over var(x, y), which overrides the latter

Share CSS style rules

To share CSS style rules, create a module that contains only CSS files. Import this module into the CSS file of any Lightning Web component that you want to style. You can import style rules from multiple CSS modules. Imported style rules are applied to templates just as unimported style rules are. Lightning Web Components supports CSS cascading algorithms.

/* Syntax */
@import 'namespace/moduleName';
​
/* Example */
@import 'example/cssLibrary';
Copy the code

cssSharing.html

<template>
    <h1>Title</h1>
    <p>Body text</p>
</template>
Copy the code

cssSharing.css

@import 'example/cssLibrary';
Copy the code

cssLibrary.css

h1 {
    color: darkorchid;
    font-size: xx-large;
}
​
p {
    color: yellowgreen;
    font-size: larger;
}
Copy the code

CSS support and performance impact

The CSS scope matches the CSS Scope module level 1 standard, with some exceptions.

  • Not supported :host-context() pseudo-class function
  • ID selectors in CSS or JavaScript are not supported.

The scoped CSS affects performance, so use it with caution. Each chain of selectors is scoped, and each compound expression passed to :host() is distributed across multiple selectors. This transformation increases the size and complexity of the generated CSS. These additions mean more bits on the line, longer parsing times, and longer style recalculation times.

To ensure wrapper CSS, each element has an extra attribute, which also increases rendering time. For example,

has the example-parent_parent-host attribute.

<example-parent example-parent_parent-host>
    <h1 example-parent_parent>To Do List</h1>
    <example-child example-parent_parent example-child_child-host>
        <h1 example-child_child>To Do Item</h1>
    </example-child>
    <example-child class="active" example-parent_parent example-child_child-host>
        <h1 example-child_child>To Do Item</h1>
    </example-child>
</example-parent>
Copy the code