Lightning web components (LWC) interview questions Part II

First of all, thank you Trailblazers for 16000+ views on the first part of Lightning web components (LWC) interview questions. It gave me the inspiration to write another and here we go.

What are styling hooks in LWC? and why do we use them?

As the standard SLDS system has predefined sets of colors and styles, we often want to override the default stylings. For example, what if you want to change the color of the brand variant of lightning-button to let's say "purple"? But wait, we can't override the styling because of Shadow DOM in LWC. So how we can do that?

There we use the styling hooks to customize the standard base Lightning web components. Styling hooks are nothing but the CSS custom properties exposed by Base Lightning web components. You can find more details about styling hooks on standard docs of each base component.

Example:

HTML Code

<lightning-button variant="brand"
    label="Submit"
    title="Submit"
    class="my-brand">
</lightning-button>

CSS

.my-brand {
    --sds-c-button-brand-color-background: purple;
}

Output

How we can create and set CSS custom properties to stylize LWC from the app builder/experience builder?

We can create CSS custom properties in the .css files of a lightning web component, which can be exposed as custom public attributes of a Lightning web component to the experience builders so the admins can configure them without code. We can reuse these custom properties in our component as many times as we want. See the video for more details: Styling LWC using Public Properties | Developer Quick Takes!. Soon I will write a detailed post on this.

What is synthetic Shadow Dom?

As we have already discussed shadow DOM in the first part of this post, you might be surprised to know that LWC does not use the native Shadow DOM of the browser. The framework isolates the CSS properties based on the container component.

If you inspect the HTML generated for any LWC component, you will notice that framework adds a custom property in this format namespace-name-of-your-component to each child element in that component and the host that is the component itself has property in this format namespace-name-of-your-component-host.

Then all the CSS code you write in that component is applied to all elements with that specificity. See the example below.

myLwc.html

<template>
	<div class="app slds-p-around_x-large">
	</div>
</template>

myLwc.css

div {
    background-color: lightsalmon;
}

See how the Lightning Web Component framework translates your code on the browsers.

Computed HTML

<c-app c-my-lwc-host>
    <div c-my-lwc class="app slds-p-around_x-large">
    </div>
</c-app>

Computed CSS

div[c-my-lwc] {
    background-color: lightsalmon;
}

That is the reason why the LWC shadow DOM is a little different from Native Shadow DOM, CSS custom properties can traverse through component boundaries, and CSS loaded from the static resources is applied globally.

Can we create Headless Action/Screen Action using LWC? How?

Yes, from Summer 2021 we can create custom actions on record pages using lightning web components. There are two types of actions we can create first is screen action where the component is visible and another is headless action where the component is not visible.

See my posts for more details on LWC Quick actions.

How to communicate between two non-related Lwc components from the same Page?

We can communicate with unrelated LWC components using Lightning Messaging Services(LMS). LMS uses a publish and subscribe model, where one component is the publisher of the event and another is the subscriber.

How to update the LWC component based on data updates in Salesforce?

We can update the component based on data updates in salesforce in the following ways.

Using getRecord method from Lightning UI Record API (works with the single record only on record page in lightning experience).
Using push topic and Streaming APIs
Change Data Capture and Streaming APIs
Platform Events and Streaming APIs

Thanks for visiting! Do you have some questions in mind you want to share or find an answer for? Please let me know in the comments or email me at rahul@forcetrails.com.