Scenario based Interview Questions LWC 2022

How to pass data from one component to another unrelated component on the same page?

There are several ways we can share data between unrelated/sibling components on the same page.

• Using Lightning Messaging Service(LMS) [This is in beta for experience sites as of Spring 22]
• Sharing data using events and public attributes via parent component. If the components are siblings and are under the same parent component then we can fire events from the source component and send that data to the target using a public attribute or a function.
• Using pub sub-components (not recommended anymore).
• Using the URL parameters and CurrentPageReference.

How to allow parent components to query the elements?

From Spring 2022 Salesforce introduced a concept called Light DOM, where the components owned by the Light DOM can be queried outside the shadow boundaries.

How to override/customize the standard Lightning web component stylings?

We can use SLDS styling hooks to override the standard LWC component stylings. SLDS styling hooks are the CSS variables defined by the SLDS framework to which we can set custom values, like colors, font size, border, border color, etc. Check, how to use SLDS Styling Hooks

How can we track the database changes in the Lightning web component and refresh UI on data updates?

If we need to track the changes done by Lightning Data Service then we can use the getRecordChangeNotifiy() function from the LDS.

But If you need to track data changed from other places like Apex Trigger, Flow, API integrations then we need to use the Change Data Capture (CDC).

In case you face any limitations with CDC, you can directly use the Platform Events.

How can we avoid redundancy in LWC and reuse the code across multiple components?

There are three ways we can reuse the JS code in LWC:

1. Using the component inheritance.
2. JS Util components. Check out my detailed article for more information: Share JavaScript code across LWC components | LWC EMI Calculator
3. Using a Static Resource.

How can we share stylings across multiple components?

For CSS like the JS Utils, you can also create style util components. and then import them into another component's CSS files. Check out my detailed article for more information: Share common CSS with utility components in LWC

How do we expose CSS properties to lightning app builders so admins can configure them? For example colors?

Here are the steps;

1. Create a public property to store the value of color using @api decorator.
2. Expose the property using design attribute to lightning app builder/community builder.
3. Apply the styles in the renderedCallback of the component by querying the specific elements.

How do you define the component composition and break down the components into small reusable components?

The first thing is to break down components into smaller components, by considering the requirement and the data flow. After that apply the SOLID principles to validate and modify the composition or extension of the components.

1. Single responsibility: Every software module should have only one reason to change, meaning every single component is doing only a single job. For example, create individual components for each different form on the page.
2. Open/Closed Principle: A software module/class is open for extension and closed for modification, meaning we should be modifying the component that is already developed only if there is a change requirement it is meant for. But we can extend it if needed. Like we should not be modifying the account's form component when there is a requirement change for opportunity or contact. But we can create a new component for an account and extend the old account's component to inherit already developed features and add new in the new component.
3. Define the rough idea of how the data is going to flow across your components before you start implementing.

Can we dynamically create lightning web components based on user interactions?

As of now Spring 2022, we can't create LWC components dynamically in Salesforce, but if you are using LWC Open source then you can do it off the Salesforce platform.

How to query elements based on a data attribute and its value?

We can query the components if the attribute is defined on the component like below.

this.template.querySelector('[data-id]');

Also, we can query the component if we need to query the component with the value of the attribute like this.

this.template.querySelector(`[data-id='id-value']`);

You can also pass the string templates to the query selector function.

this.template.querySelector(`[data-id='${id}']`);

Can we use managed package components inside our custom LWC components?

You can use them in the app builders but not in the other component's code as of now.