Styling Lightning Web Components

 Composability :

Modern apps are composable and made up of reusable elements where smaller parts are 

combined to create larger parts.

This extends to both functionality as well as styling.

Encapsulation :

1.Shadow DOM

Ability for styles to be self-contained to just the reusable element.

2.CSS Custom Property(aka css variables)

Supported mechanism to set and override styles on a reusable element from a parent element.

Shadow DOM :

Shadow DOM, a part of the Web Components standard, helps to isolate the internals of a component from the 

rest of the document,including styling.

This protects us from breaking CSS changes,global styles, or any side-effects of cascading.

Note : Your UI won't change depending on the context.

CSS Custom Properties :

The primary way you can customize the CSS inside the Shadow DOM is by relying on CSS Custom Properties (aka CSS Variables)

to change and override property values.

The way you use them is similar to how you would use variables in javascript.

ex :

    :root {

      --myAlign: center;

    }

    

    #container {

      width : 100%;

      height:350px;

      background-color:#0099FF;

      display:flex;

      align-items:var(--myAlign);

      justify-content:var(--myAlign);    

    }

    

Note :

1.With Shadow DOM, you get style encapsulation.

2.With CSS Custom Properties, you have the ability to customize the parts of the UI that have been exposed for customization.

Styling Hooks and LWCs :

Styling hooks offer an easy, supported way of making styling customizations to any web component (such as a Base Component)!

They are nothing more than css custom properties.

ex : --sds-styling-hooks:"awesome";

   

:host {

   --sds-c-card-color-background:#222;

   --sds-c-card-text-color:#fff;

   --sds-c-card-color-border:transparent;

   --sds-c-card-spacing-block:1.5rem;

   --sds-c-card-radius-border:0;

   --sds-c-card-footer-spacing-block-start:1rem;

   --sds-c-card-footer-color-border:transparent;

   --sds-c-card-footer-text-align:left;

   

   --sds-c-badge-color-background:#fff;

  --sds-c-button-color-background:black;

  --sds-c-button-text-color:#111;

  --sds-c-button-spacing-inline-start:1.5rem;

  --sds-c-button-spacing-inline-end:1.5rem;

  --sds-c-button-spacing-block-start:.5rem;

  --sds-c-button-spacing-block-end:.5rem;

  --sds-c-button-radius-border:0;

}

Create Styling Hooks for Lightning Web Components :

This feature allows creating custom styling hooks for custom components.

To define a CSS custom property in a component's style sheet, prefix with --.

To insert the value of the property ,use var.

ex :

 :host {

   --important-color:red;

 }

 .important{

   color:var (--important-color)

 }

share CSS Style in LWC :

=========================

1.share CSS styles among LWC component (summer 20 release)

Create a component that contains a CSS file and configuration file.

custom.css

custom.js-meta.xml

Then import it in the component you want to use the CSS file in.

/**myComponent.css **/

import 'c/custom';

/* Define other style rules for mycomponent here */

2.load css from static resource

import { loadStyle } from 'lightning/platformResourceLoader';

renderedCallback() {

                Promise.all([

                    loadStyle(this, resourcePath + '/custom.css');

                ])

}