Styling Lightning web components

Let us discuss here what are the different ways we can able to style the lightning web component.we will be discussing here how to use the SLDS framework and custom styles and Shadow DOM. To give your component the Lightning Experience look and feel, use Lightning Design System. To go your own way, use CSS. Here is the simple apex class we will be using to render the data in UI.

 

 

Create a lightning web component using the following sfdx command

and now we will be using this component to test the different ways to apply the styles to LWC

Option 1: Using Lightning Design System

Salesforce Lightning Design System is a CSS framework that provides a look and feels that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom Lightning web components a UI that is consistent with Salesforce, without having to reverse-engineer our styles. And best of all, it just works with Lightning components running in Lightning Experience and in the Salesforce mobile application. Components in the lightning namespace already use Lightning Design System. They also interoperate with Lightning web components. The Following example shows how are render the table using lightning design system

Use the below cssexample.html code which will be using the SLDS styles for the table.


Use the below cssexample.js example code

Use the below cssexample.js-meta.xml

Push changes to scratch org and add this component to the layout .you can able to see the output as shown below and look and feel is inherited from the lightning design system as shown below.

 

 

 

Option 2: Custom CSS Style Sheet 

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. Because Lightning web components have a shadow DOM, styles defined in a component’s style sheet are scoped to the component. They don’t apply to a parent, child, or sibling components. This rule is strict, but it 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. Refer the below code that will use custom CSS styles

Use the below CSS code.

You can able to see the output as shown below.

Another important way to style a component, create a style sheet in the component bundle with the same name as the component. The style sheet is applied automatically. Lightning web components have a shadow DOM, styles defined in a component’s style sheet are scoped to the component. They don’t apply to a parent, child, or sibling components. This rule is strict, but it 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.

This example demonstrates how the CSS styles defined in a parent component don’t reach into the shadow DOM of a child. There are two components, c-cssparent and c-csschild, which each contains an <h1> tag. The cssparent.css style sheet defines the h1 style as xx-large. When you run the code, the style applies only to the <h1> tag in the parent, not to the <h1> tag in the nested child

Create a lightning web component using the below SFDX command.

Use the below csschild.html

 

Create another lighting web component using the below SFDX command.

Use the below cssparent.html

 

Use the below cssparent.css

 

now push the changes and add them to the page layout and you can able to see the output as shown below.

 

A parent component can style a child component, but it styles it as a single element. A parent can’t reach into a child to style elements inside its shadow DOM. Let’s add a c-csschild selector to cssparent.css that defines a border around the child component.

update the cssparent.css styles as shown below

Push changes and you can able to see the values as shown below.

Now let’s style the componentc-csschild from its own style sheet, csschild.css. Before we add a selector to csschild.css, let’s remove the c-csschild selector from cssparent.css to remove the red box. 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. Here is cssparent.css with the c-csschild removed.

updat ethe parent.css like below and see the changes

 

Option 3: Style the Host Element

Because Lightning web components have a Shadow DOM, you can use the standard :host selector to style the host element. CSS styles applied to the host element don’t affect child components or parent components. To style the host element, use the :host selector.

The :host selector accepts an optional list of selectors. To match, the host element must have a class that matches the passed selector.

 

create the lwc component using the below command

 

hello.html code

hello.css

 

you can able to see the output as shown below

 

 

Option 4: Use Aura Design Tokens

 

Let’s discuss her how to use the Aura Design token for the lightning web components. Design tokens are named entities that store visual design attributes, such as margins and spacing values, font sizes and families, or hex values for colors. Design tokens must be defined in an Aura component in the same DOM as your Lightning web component. Then, the Lightning web component can use CSS variable syntax to reference the Aura component’s design token. When you reference a design token, use the –lwc- prefix. For example, imagine a parent Aura component with these design tokens.

 

Create a new Aura Component token defaulttoken.css

 

then you can able to refer this token in lighting web component using the below syntax.

 

create a simple lwc using the below SFDX command  that  will be using the Aura design token

 

 

use the below csstest.html

 

update the csstest.css  as below

 

use the below csstest.js-meta.xml

 

create an aura component as shown below which is act like contains for the lightning web components and we will be inheriting the Aura tokens styles from this Aura component to Lightning web component.

 

push the changes and  Add it to the page layout you can able to see the below styles which are inherited from the Aura tokens.

 

 

 

Overall these are the different way you can apply styles to lightning web components

  1.  Using Lightning Design System
  2. Custom CSS
  3. Using Host Selector
  4. Using Aura Tokens