Comprehensive Guide to Lightning Web

Component (LWC) Interview Questions

From Basics to Advance

1.What is lifecycle hook?

1. Constructor is called
2. Public property are set on parent
3. Parent is inserted to DOM
4. Once parent is inserted to DOM, Connected callback is called on
parent
5. From this connected callback as parent is already inserted, you can
reference different DOM elements
6. Parent is rendered
7. Once parent is rendered, Constructor is called on the child
8. Public property of child are set
9. Child is inserted to DOM
10. Once child is inserted to DOM, Connected callback is called on
child
11. Child is rendered
12. Once child is rendered, rendered callback is called
13. Once child components are rendered on the screen, then
parents rendered callback is called.
constructor()
• Hook that fires when a component instance is created.
• Don’t use a return statement inside the constructor body, unless it is a
simple early-return (return or return this).
 • At that point, the component properties won’t be ready yet.
• It flows from parent to child.
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
constructor() {
super();
console.log('In Constructor');
}
connectedCallback()
• Fires when a component is inserted into the DOM.
• The component properties will be ready, but the child elements won’t
be yet.
• It can fire more than once. For example, if you remove an element
and then insert it into another position, such as when you reorder a
list, the hook fires several times. If you want code to run one time,
write code to prevent it from running twice.
• It flows from parent to child.
• The equivalent in Aura is the init() event.
import { LightningElement } from 'lwc';
export default class App extends LightningElement {

connectedCallback(){
console.log('In connectedCallback');
}
}
render()
• Hook that overrides the standard rendering functionality.
 • Gets invoked after connectedCallback() and must return a valid
HTML template.
• It can fire more than once.
• It flows from parent to child.
import { LightningElement } from 'lwc';
export default class App extends LightningElement {

render(){
console.log('In render');
}
}
renderedCallback()
• Fires when a component rendering is done.
• It can fire more than once.
• It flows from child to parent.
The renderedCallback() is unique to Lightning Web Components.
import { LightningElement } from 'lwc';
export default class App extends LightningElement {

renderedCallback(){
console.log('In renderedCallback');
}
}
disconnectedCallback()
• Fires when a component is removed from the DOM.
• It can fire more than once.
 • It flows from parent to child.
• The equivalent in aura was the unrender() methods of the custom
renderer file.
When this component removed form DOM, it will fire disconnectedCallback
and clear array.
import { LightningElement } from 'lwc';
export default class App extends LightningElement
{
disconnectedCallback(){
console.log('In disconnectedCallback');
}
}
errorCallback(error, stack)
Captures errors that may happen in all the descendant components
lifecycle hooks.
errorCallback(error, stack) {
alert(error);
}
2.Why we Use of lifecycle hooks ?
Dynamic rendering of components: we can use the render() hook to
render different templates according to some conditions.
Component that is an error boundary for the descendent components
lifecycle hooks: we can use the errorCallback() to implement such
component.

3.How to iterate over multiple items in LWC?

To iterate over list we can use two directives
for:each
Iterator
Whenever we use for:each or Iterator we need to use key directive on the
element on which we are doing iteration. Key gives unique id to each item.

4.Explain Component Communication In LWC?

lightning web component can be nested and there are 4 possibilities for
communication between components.
• Parent to child communication
• Child to parent communication
• Communication between two separate components.
• Lightning Web Component to aura component

4.How to pass data from Parent to child communication?

To pass data down in the component hierarchy, the child component
must declare a public API. There are two forms in the public API of a
component.
• public properties
• public methods
5.Define parent to child communication using Public Property?
If you want to make the property to be called from another component, you
need to declare this property with @api decorator in the calling
component. Along with decoration you have to import this in your js file
as:
import { LightningElement, api } from ‘lwc’;

6.Define parent to child communication using Public Property?

Created a method and used api decorator before it so as to expose it in
parent component.

7. Difference between render and renderedCallback()?

Render
• Hook that overrides the standard rendering functionality.
• Gets invoked after connectedCallback() and must return a valid
HTML template.
• It can fire more than once.
• It flows from parent to child.
import { LightningElement } from ‘lwc’;
export default class App extends LightningElement {
render(){
console.log(‘In render’);
}
}
renderedCallback
• Fires when a component rendering is done.
• It can fire more than once.
• It flows from child to parent.
The renderedCallback() is unique to Lightning Web Components.
renderedCallback() method in child component will get fired first.

8.What is the difference between wire and imperative in LWC?

1. Wire Service (Automatic and Reactive):
When you “wire” a function or property, Salesforce automatically listens for
changes that affect the data and retrieves fresh data when necessary. It’s
reactive; it updates the component’s data whenever the relevant Salesforce
data changes.
import { LightningElement, wire } from ‘lwc’;
import getPizzas from ‘@salesforce/apex/Dominos.getPizzas’;
export default class PizzaMenu extends LightningElement {
@wire(getPizzas) pizzas;
}
In this example, pizzas gets updated automatically if the data in Salesforce
changes.
2. Imperative Apex (Manual and More Control):
You call Apex methods directly at the specific times you decide, like in
response to a user action (e.g., clicking a button), or a lifecycle event, etc.
Differences:
Reactivity: wire is reactive and automatic, while imperative calls are manual
and only happen when specifically invoked.
Control: Imperative calls give you more control over error handling,
complex logic, and can be used for more than just fetching data (e.g.,
sending data, calling multiple methods consecutively, etc.), whereas wire is
mainly used for directly wiring data to properties or functions.

9. How to pass data from Child to Parent?

Data must be passed up using Events. Events are just standard JavaScript
events that we fire from the child component and listen into the parent.
Note: To communicate down the component containment hierarchy, we
can pass properties to the child via HTML attributes, or public methods.
To communicate down the component hierarchy we don’t need events.
10.How do we communicate between different components which
don’t have relation?
To communicate between two different components that do not have any
direct relation, we use publish-subscribe utility.

11.How to Expose Apex Methods to Lightning Web Components?

To expose an Apex method to a Lightning web component
• method must be static
• method must be either global or public
• Annotate the method with @AuraEnabled

12.What is the use of Client-Side Caching?

• Annotating the Apex method with
@AuraEnabled(cacheable=true) improves the run time
performance.
• To set cacheable=true, a method must only get data, it can’t mutate
(change) data.
• Marking a method as cacheable improves component’s
performance by quickly showing cached data from client-side
storage without waiting for a server trip.
• If the cached data is stale, the framework retrieves the latest data
from the server. Caching is especially beneficial for users on high
latency, slow, or unreliable connections.
• To use @wire to call an Apex method, you must set cacheable=true
13.How to Wire an Apex Method to a Property?
If an Apex method is annotated with @AuraEnabled(cacheable=true), we
can invoke it from a component via the wire service.
import apexMethodName from
‘@salesforce/apex/Namespace.Classname.apexMethodReference’;
@wire(apexMethodName,{ apexMethodParams })propertyOrFunction;
14.What is the purpose of the Lightning Data Service in LWC?
The purpose of the Lightning Data Service in LWC is to provide a
declarative and efficient way to perform CRUD (Create, Read, Update,
Delete) operations on Salesforce records. It is a framework-provided
service that works as a data layer between the LWC component and the
Salesforce database.

15.What are the benefits of The Lightning Data Service?

• Declarative data binding: With the Lightning Data Service, you can
declaratively bind your component’s UI elements to record data
without writing any Apex code or SOQL queries.
• Caching and automatic record updates: The Lightning Data
Service caches record data locally on the client side and
automatically updates it when changes occur in the database. This
improves performance and reduces the number of round trips to the
server.
• Automatic CRUD operations: The Lightning Data Service provides
a set of methods to create, read, update, and delete records. These
methods are automatically implemented and available for use in your
LWC component.
• Automatic sharing and field-level security: The Lightning Data
Service automatically enforces sharing rules and field-level
security when reading or modifying records.

16. If parent component A and there are two component B and C as

child components. How can we communicate between B and C ?
We should fire up event from child component B to parent A then from A
call attribute / function exposed (as @api) and pass data into C component.

17.What is LMS?
LMS is defined as the standard publish-subscribe library that enables
communication with DOM across the components be it Visualforce Pages,
Aura components, and Lightning Web Components (LWC) all can use it to
publish message and listen to messages published by others.
18.Do we have application events in LWC?
Ans: We dont have application event as such in LWC like Aura rather we
have LMS in LWC to communicate between components which are not part
of same hierarchy.
19.How can we navigate user from LWC component to record detail
page?
We can do it using NavigationMixin service
20.Can I get current user ID in LWC without apex?
Yes we can get current user ID without apex by simply importing
import Id from ‘@salesforce/user/Id’
21.Can i call function annotated with @AuraEnabled(cacheable= true)
imperatively ?
Ans: Yes
22.Can we do DML in method annotated with
@AuraEnabled(cacheable= true)?
Ans: No we can’t do DML inside any method annotated with cacheable =
true , you will receive an error as DMLLimit Exception.
23.How to refresh cache when calling method imperatively?
We have to use getRecordNotifyChange(RecordIds) which refreshes the
LDS cache providing you the latest data this will work only if cacheable =
true was there. Otherwise we will have to call the function again from our js
to get the latest data.
24.When do we face error of “Cant assign to Read only property” in
LWC?
This error occurs when you are trying to make changes to a property which
is marked as @api , ideally you should clone the value then make the
changes to it.
25.How do you handle errors and exceptions in LWC?
Error handling in LWC can be done using try-catch blocks or by leveraging
the onError lifecycle hook. You can catch exceptions and display
appropriate error messages to the user, ensuring a smooth user
experience.
<template>
try {
// Code that may throw an exception
} catch (error) {
// Handle the error and display an error message
}
</template>
26.How do you make an HTTP callout from a Lightning Web
Component?
You can use the fetch API to make HTTP callouts in LWC . Import the fetch
method and use it to send requests to external services.
27.What is the purpose of the lightning-record-edit-form component in
LWC?
lightning-record-edit-form is used to create, view, or edit a record’s fields
using the Salesforce Lightning Data Service.
28.How can you communicate between sibling components in LWC?
You can use custom events and properties defined in a common parent
component to facilitate communication between sibling components.
29.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.
30. Suppose you have written a LWC which has the @wire decorator
to get the data from apex. But you are unable to get the data from the
server. What could be one of the reason?
check whether you have used cacheable=true along with @AuraEnabled
annotation in the apex method.
32.Can I call function annotated with @AuraEnabled(cacheable= true)
imperatively ?
Yes
33.How to ensure that your LWC respects FLS?
1. Use Standard Components Where Possible: Use Lightning Data
Service components
like lightning-record-form, lightning-record-view-form, and lightning-record-
edit-form, respect FLS automatically. Whenever possible, use these
components to handle data input/display.
<lightning-record-view-form record-id={recordId} object-api-
name=”Account”>
<lightning-output-field field-name=”Name”></lightning-output-field>
<!– other fields –>
</lightning-record-view-form>
In this example, FLS is enforced for the “Name” field of the “Account”
object, and if a user doesn’t have permission to view the “Name” field, it
won’t be displayed.
2. Check FLS in Apex:
When writing Apex controllers that are called from your LWC, always check
FLS. Use the SecurityEnforced annotation.
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static Account getAccount(Id accountId) {
return [SELECT Id, Name FROM Account WHERE Id = :accountId
WITH SECURITY_ENFORCED];
}
}
The WITH SECURITY_ENFORCED clause ensures that the query
respects FLS, throwing an exception if the user lacks the necessary
permissions.
3. Use Schema Methods in Apex:
Utilize Schema methods in Apex to check if the current user has read,
create, or edit access to a field. This is more manual but allows for fine-
grained control.
public with sharing class SecurityCheck {
public static Boolean isFieldAccessible() {
return Schema.sObjectType.Account.fields.Name.isAccessible();
}
}

34. What do you mean by cacheable = true annotations ?

First of all when you mark function as cacheable = true it can only retrieve
data i.e. it cant have any DML.
It is used to improve component performance by quickly showing cached
data from client side storage without waiting for server trip.

35. Why do we use $ when passing property in wire function, what

does it mean?
Ans: $ prefix tells the wire service to treat values passed as a property of
the class and evaluate it as this.propertyName and the property is reactive.
If the property’s value changes, new data is provisioned and the
component renders.
36. When is the wire method/property called in the lifecycle of a
component ?
Wired service is called right after component is created ie after constructor
and is again called when parameter that you are passing is made available.
37. Is wire method called multiple times during lifecycle of component
?
Ans: True

38. What is the difference between event.StopPropogation() and

Event.preventDefault()?
Ans: stopPropagation prevents further propagation of the current event in
the capturing and bubbling phases. preventDefault prevents the default
action the browser makes on that event.
39. How can i reference record ID of page in my component which is
fired from quick action.
There are two types of quick actions in LWC :
Screen actions : Normal action which open a modal
Headless actions : Which dont have any html file rather just logic written in
javascript and no modal window will come up
In case of screen actions we will be able to get recordID by just defining
recordID as public property in the component.
For headless action you have to define @api invoke method which is auto
called and recordID will be set after this function is called.
40. What is a promise in async transactions? What are it different
stages
Promise is object returned in async transaction which notifies you about
completion or failure of transaction.
For example when you call apex imperatively it returns you a promise
object on the basis of object returned execution either goes into (then) ie
transaction was successful or (catch) which means transaction failed.

Stages of promises are :

Pending: Waiting for result.
Fulfilled: Promise results in success.
Rejected: Promise result in failure.
41. Why do we extend LightningElement?
LightningElement is custom wrapper on HTMLElement which actually
contains all the lifecycle hooks methods over which Salesforce did some
customization.

42. How to send data from Parent to Child in LWC?

For parent to child communication you just need to expose your function or
attribute as @api then in your parent component you can use
querySelector to actually query the child component access exposed
attribute or method.
43. What does composed = true does in an event ?
These type of events can bubble up inside dom and also able to cross
shadow boundary.
44. What is callback hell?
Callback hell occurs when there are many functions you want to call async
and you end up putting them one side each another and as the code grows
it becomes very difficult to read for example :
getData(function(x) {
getMoreData(x, function(y) {
getMoreData(y, function(z) { ... });
});
});
45. What are decorators in LWC (Lightning web components) in
Salesforce? Latest interview question.
Ans: The Lightning Web Components programming model has three
decorators that add functionality to a property or function. There are 3
decorators for LWC
@track , @wire, @api
46. When do I use @track on a property ? Do I still need it considering
all properties are by default reactive now?
After Spring 20 all the properties are made by default reactive ie we dont
need @track for primitive properties. We still need it for array or object type
properties

47. Can I use multiple decorators on one property ?

No we cant use multiple decorators on same property.
48. Can I deploy component with empty css file ?
No we cant do that
49. Can I get current user ID in LWC without apex?
Ans: Yes we can get current user ID without apex by simply importing
import Id from ‘@salesforce/user/Id’
48. Can i call function annotated with @AuraEnabled(cacheable= true)
imperatively ?
Ans: Yes
49. Can we do DML in method annotated
with @AuraEnabled(cacheable= true)?
Ans: No we cant do DML inside any method annotated with cacheable =
true , you will receive an error as DMLLimit Exception.
50. How to refresh cache when calling method imperatively ?
Ans: We have to use getRecordNotifyChange(RecordIds) which refreshes
the LDS cache providing you the latest data this will work only if cacheable
= true was there.
Otherwise we will have to call the function again from our js to get the latest
data.
51. How can you pass data between LWC components?
Answer:
There are several ways to achieve this, depending on the relationship
between the components. The most common methods include using public
properties, custom events, and the Lightning Message Service (LMS).
Understanding these methods is crucial for building robust and
maintainable applications.
1. Using Public Properties Public properties are used to pass data from a
parent component to a child component. The child component exposes a
public property using the @api decorator, and the parent component binds
data to this property.
2. Using Custom Events Custom events are used to pass data from a
child component to a parent component. The child component dispatches
an event with the data, and the parent component listens for this event and
handles the data.
the child component dispatches a custom event with a message in
the detail property when a button is clicked. The parent component listens
for this event and handles the data in the handleEvent method.
3. Using Lightning Message Service (LMS) The Lightning Message
Service (LMS) is used to communicate between components that do not
have a direct parent-child relationship, even if they are in different parts of
the application.
52. How do you handle asynchronous operations in LWC?
Asynchronous operations ensure that the user interface remains
responsive while waiting for these tasks to complete. In LWC,
asynchronous code can be managed using JavaScript’s Promises and
the async / await syntax.
Using Promises and async / await JavaScript Promises represent the
eventual completion (or failure) of an asynchronous operation and its
resulting value.
• Promises: Represent asynchronous operations and can be handled
using .then() and .catch() methods.
 • async/await: Syntactic sugar built on top of Promises, allowing for a
more readable and concise code structure.
Steps
1. connectedCallback Method: The connectedCallback lifecycle hook
is used here to fetch data as soon as the component is inserted into
the DOM. This ensures the initial data is available when the
component is rendered.
2. async Keyword: Declares the connectedCallback function as
asynchronous, allowing the use of await within it.
3. await Keyword: Pauses the execution of
the connectedCallback function until the fetchData Promise resolves.
This ensures that this.data is assigned the fetched data before the
method completes.
Using async / await , the code becomes more readable and easier to
maintain compared to traditional Promise chaining with .then() and .catch().

53. Give me a scenario where you will use Lightning Message Service
in LWC?
There is a parent component that has two child components. One child
component is responsible for displaying a list of items, while the other child
component is responsible for displaying the details of the selected item.
When the user selects an item from the list, the first child component can
send a message on a specific channel with the details of the selected item.
The second child component, which has subscribed to the same channel,
can receive the message and update its display with the new details.

54. Can you explain the role of the Salesforce Object Query Language
(SOQL) in LWC?
SOQL is a query language used in Lightning Web Components (LWC) to
retrieve data from the Salesforce database. The wire adapters and
imperative Apex calls in LWC provide developers with ways to make
server-side calls to retrieve data using SOQL.
55. Explain Bounded and Unbounded Expressions in LWC.
In LWC, expressions are used for dynamically displaying the data in the
template. There are two types different types of expressions in LWC:
• Bounded expressions are enclosed within double curly braces ({{
}}). They are used to display data values in the template that are
derived from the component's JavaScript class or HTML attributes.
• Let’s understand this through an example -
<template>
<p>Hello {{name}}, welcome to my website!</p>
<p>The result of adding 3 and 2 is {{addNumbers(3, 2)}}.</p>
</template>
• Unbounded expressions are enclosed within single curly braces ({
}). They are used to evaluate JavaScript expressions in the template
itself. Unbounded expressions can be used to assign values to HTML
attributes or to conditionally render HTML elements.
Let’s understand this also with an example -
<template>
<input type="text" value={inputValue}>
<template if:true={showMessage}>
<p>The message is: {message}</p>
</template>
</template>
56. How can you render multiple templates in LWC?
In LWC, we can display multiple templates conditionally based on the
component's state using the if:true directive.
Here's an example of how to display multiple templates in LWC:
<template>
 <template if:true={showTemplate1}>
<p>This is template 1</p>
</template>
<template if:true={showTemplate2}>
<p>This is template 2</p>
</template>
</template>
57. How do you handle user input in LWC forms?
We can handle user input in forms using event handlers and data binding.
• Event Handlers: LWC provides some built-in event handlers that we
can use for handling user inputs, like - onClick, onChange,
onSubmit, etc. For example, Suppose we want to handle a button
click event, we can define an onClick event handler on the button
element like this:
• Data Binding: LWC has some data binding features inbuilt that help
in binding the value of an input element to a property in the
component state.
58. Explain in detail about @api and @track decorators in LWC.
In LWC, both @api and @track decorators are used to define properties in
a component, but they serve different purposes.
• The @api decorator is used to define a public property that can be
accessed by other components. This allows passing data between
components in a parent-child relationship, or between unrelated
components using the Lightning Message Service. Here's an
example of how we can use the @api decorator to define a public
property:
import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {

 @api message = 'Hello Smriti;
}
Now the component is defined. Other components can access this property
using dot notation, like this:
<c-my-component message="Hello from parent"></c-my-component>
• The @track decorator is used to define a reactive property, It means
suppose there are any changes in the property, then the whole
component will be re-rendered. This is useful when we need to
update the component's UI based on changes to the property. Here's
an example of how we can use the @track decorator to define a
reactive property:
58. Explain the concept of data binding in LWC?
Data binding is a core concept in LWC that allows developers to establish a
relationship between a component's properties and the values displayed in
its HTML template.
In LWC, there are two different data binding used -
• Property binding: It is used to bind a component's property to a
value in the HTML template.
<p>{message}</p>
Whenever the "message" property in the component is changed, the value
displayed in the HTML template will be automatically updated to reflect the
new value.
• Event binding: This is used to bind an HTML element's event to a
method in the component. To do this, we need to use the on-
syntax followed by the event name and the name of the method to
be called whenever the event is triggered. <button on-
click={handleClick}>Click me</button>
59. What are the benefits of using LWC over traditional JavaScript
frameworks?
 • Modern web standards: LWC is built using modern web standards
like HTML, CSS, and JavaScript. This makes it easier to get started
with LWC development.
• Lightweight and fast: It can be loaded and executed quickly. This
results in faster page load time and a better user experience.
• Modular architecture: It allows developers to build reusable and
maintainable components, this saves a lot of time and effort in the
long run.
• Compatibility with Salesforce: LWC is fully compatible with the
Salesforce platform.
60. What is the role of the Shadow DOM in LWC, and how does it differ
from the traditional DOM?
In LWC, the Shadow DOM is used to encapsulate the component's DOM
hierarchy and prevent CSS styles and JavaScript code from bleeding out of
the component and interfering with the rest of the page.
The Shadow DOM is a part of the web standards and it is supported by
modern browsers. It allows the creation of a separate DOM tree inside the
component that is hidden from the outside world. This way, the
component's styles, and behaviour are self-contained and it doesn't affect
other parts of the page.
In contrast to the traditional DOM, which is global and mutable.
When we create an LWC component, its HTML template, and CSS styles
are automatically encapsulated in the Shadow DOM.
61. Can you explain how to use the Lightning Message Service in
LWC and give an example?
To use the Lightning Message Service in LWC, we are required to follow
these steps:
• Define a message channel: A message channel defines the topic or
theme of the messages that will be published and subscribed to. We
can define a message channel using the “lightning/messageService”
module.
import { LightningElement } from 'lwc';
import { createMessageChannel } from 'lightning/messageService';
• Publish a message: After defining a message channel, we can
publish messages on that channel using the publish() method.
import { LightningElement } from 'lwc';
import { createMessageChannel, publish } from 'lightning/messageService';

• Subscribe to a message: Finally, to receive and act upon messages

published on a message channel, we can use
the subscribe() method.
import { LightningElement } from 'lwc';
import { createMessageChannel, subscribe } from
'lightning/messageService';

62. How do you use the Salesforce REST API in LWC? What are the
best practices for integrating with external systems?
To use the Salesforce REST API in LWC, we can use the built-in fetch
method or a third-party library like axios or jQuery.

63. Can you explain how to use the LWC component cache and why it
is important for performance?
When a user loads a page that contains LWC components, the browser
needs to download and render those components. This problem can be
solved using the LWC component cache.
This helps speed up this process by storing copies of the components in
the browser's cache.
So, in the case when the browser does not need to download the
components every time the user accesses the page. Instead of this, the
cached components can be quickly retrieved and displayed. This helps in
reducing page load time and improves the user experience.
To enable the LWC component cache, we need to use
the @wire decorator with the getRecord or getListUi wire adapters. These
adapters automatically cache the results of the wire call in the browser's
cache, which can help improve performance.

64. How do you create a Lightning App that embeds an LWC

component?
To get started, first, we need to create the LWC component that we want to
embed.
Once we have the component, then we need to create the Lightning App
itself.
Once the app is created, we can then embed the LWC component within it.
<aura:application extends="force:slds">
<c:myLwcComponent />
</aura:application>

65. Explain SLDS?

The term SLDS stands for Salesforce Lightning Design System.
Salesforce Lightning Design System is used to develop web applications
with great lightning experience, without writing a single line of code in CSS.

66. Is there any possibility of having multiple wire methods in

Lightning Web Component?
Yes, there is a possibility of having more than two wire methods in
Lightning Web Components.

66. Why does LWC work faster than Aura components?

Normally, the lightning web components work faster than aura components.
This is because due to the absence of an abstraction layer, LWC is a
lightweight framework built using web stack tools such as HTML and
JavaScript.

67. How do Lightning Web components communicate with Aura

components?
There is a possibility that Aura components communicate with Lightning
Web Components with the help of Public APIs and Events.

68.Can Lightning Web Components can be embedded within Aura

Components?
True, Lightning Web Components can be embedded within Aura
Components whereas the reverse cannot happen.

69. What is the structure of LWC?

LWC is built using these main parts, including HTML, JS, CSS, and XML.
1. HTML – It defines the markup of the LWC.
2. JS – It establishes the component logic and behaviors of LWC.
3. CSS – It defines the styling of LWC.
4. XML – It includes the component’s metadata.

70.What is the uiRecordApi module?

uiRecordApi is the module in LWC that provides us with various methods to
create, update, and delete records.
Following are the Javascript methods included in the uiRecordApi
module:
 • createRecord(recordInput)
• createRecordInputFilteredByEditedFields(recordInput,
originalRecord)
• deleteRecord(recordId)
• generateRecordInputForCreate(record, objectInfo)
• generateRecordInputForUpdate(record, objectInfo)
• getFieldValue(record, field)
• getFieldDisplayValue(record, field)

71. Why do we use the Super() keyword in LWC?

Answer – When we used the constructor lifecycle hook it was mandatory
to use a super() keyword to call the properties of its parent component. It is
used to call its parent class in the hierarchy.
72. What is the difference between promise.all and promise.race?
Answer – Promise.all take multiple promises and return the promises
when all gets fulfilled and will reject immediately upon any of the input
promises rejecting.
Promise.race also takes multiple promises but it returns a single promise
whichever settles first or we can say whichever resolves first unlike
promise.all.

73. Explain code reusability in LWC?

Use Pre-Built Components
Instead of building your own button, use the standard <lightning-button>
component provided by Salesforce.
<lightning-button label="Click Me" onclick={handleClick}></lightning-
button>
Build Custom Components
Create a reusable custom-card component for displaying information in a
card format.
Combine Small Components
Share Code with Helper Functions. Create a utility JavaScript file `utils.js`
with a common function.
Use Shared Styles

Create a shared CSS file with common styles.

Reuse Backend Code
Create an Apex with a reusable method.
Use Events for Communication
Emit an event from a child component and handle it in the parent
component.

74. How to ensure FLS in LWC?

Field-Level Security (FLS) in Lightning Web Components (LWC) is crucial
to ensure that users only see and interact with the data they are authorized
to access.

Use @wire Adapters with FLS Checks

Salesforce provides wire adapters like getRecord, getObjectInfo, and
getFieldValue` that automatically respect FLS. When using these adapters,
Salesforce will enforce field-level security, ensuring users do not see fields
they do not have permission to view.
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
Check FLS in Apex Controllers
When LWC interacts with Apex, FLS must be checked on the server-side
because Apex runs in system mode, bypassing FLS by default. To enforce
FLS, explicitly check the user's field-level permissions before performing
operations.
Lightning Data Service (LDS)
When using LDS (eg lightning-record-view-form, lightning-record-edit-form,
lightning-input-field), FLS is automatically enforced.

Custom Logic and FLS

For custom logic or UI elements that need to respect FLS, you can use the
UserRecordAccess object in SOQL or Apex methods like isAccessible(),
isUpdateable(), and isCreateable() to check field-level permissions.

75.When to Use Lightning Data Service (LDS) Vs Wire Adapter?

When to use LDS
Use LDS when you want to create or display forms, such as viewing or
editing records, with standard Salesforce components like lightning-record-
view-form or lightning-record-edit-form
LDS automatically handles security, including Field-Level Security (FLS).
You don't need to worry about users seeing data they shouldn't.
When to Use @wire Adapter
- For Custom Data Handling: Use @wire adapters when you need more
control over the data, like fetching specific fields, combining data from
multiple sources, or performing calculations.
They are more flexible and allow you to manipulate the data before
displaying it. If you only need specific fields and not a full record, @wire
adapters can be more efficient.

76. Difference between using Lightning Data Service (LDS)

components and standard @wire adapters with getRecord and
getFieldValue?
Suppose you want to display the Name and Industry fields of an Account
record in your LWC.

Using Lightning Data Service (LDS) Components

<template>
<lightning-record-view-form record-id={recordId} object-api-
name="Account">
<lightning-output-field field-name="Name"></lightning-output-field>
<lightning-output-field field-name="Industry"></lightning-output-field>
</lightning-record-view-form>

lightning-output-field handles the display of each field. It automatically

formats the field value and applies standard Salesforce styling. LDS takes
care of fetching the data, respecting FLS, and displaying it in a consistent
format. There's no need for custom data fetching or handling logic.

Using @wire Adapters with getRecord and getFieldValue

import { LightningElement, wire } from 'lwc';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class AccountInfo extends LightningElement {

 @api recordId;
@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD,
INDUSTRY_FIELD] })
account;
get name() {
return getFieldValue(this.account.data, NAME_FIELD);
}

get industry() {
return getFieldValue(this.account.data, INDUSTRY_FIELD);
}
}
Here, getRecord is used to fetch the record data, and getFieldValue is used
to extract specific field values.You can decide exactly how to display the
data. For example, you can wrap the field values in custom HTML and
apply your own styles or formatting.
This approach gives you full control over the presentation and any
additional logic you want to apply to the data, such as conditional
rendering, formatting, or integrating with other data sources.

LDS is best for straightforward use cases where standard presentation is

sufficient, while @wire with getRecord and getFieldValue is suited for more
customized and complex data handling and presentation needs.

77. How to use LDS to show data from two objects?

Imagine you want to display information from both the Account and Contact
objects in a single component.
Using LDS Components
You can use multiple lightning-record-view-form components, one for each
object. Each form can display fields from the respective object.
<template>
<!-- Display Account Information -->
<lightning-record-view-form record-id={accountId} object-api-
name="Account">
<lightning-output-field field-name="Name"></lightning-output-field>
<lightning-output-field field-name="Industry"></lightning-output-field>
</lightning-record-view-form>
<!-- Display Contact Information -->
<lightning-record-view-form record-id={contactId} object-api-
name="Contact">
<lightning-output-field field-name="FirstName"></lightning-output-
field>
<lightning-output-field field-name="LastName"></lightning-output-
field>
<lightning-output-field field-name="Email"></lightning-output-field>
</lightning-record-view-form>
</template>

78. How To get records from two different objects and still maintain
Field-Level Security (FLS) in Lightning Web Components?
You can use either Lightning Data Service (LDS) components or @wire
adapters. Both approaches ensure that FLS is respected, meaning users
only see the fields they have permission to access.
Using Lightning Data Service (LDS) Components
With LDS, you can use separate lightning-record-view-form components for
each object. Each form will handle FLS and display only the fields that the
user is allowed to see.
Using @wire Adapters
Alternatively, you can use @wire adapters to fetch data from different
objects. You will need separate wire methods for each object. FLS is
automatically respected when using getRecord.

Choose the method that best fits your needs for control, customization, and
ease of use. LDS components are easier and more convenient for standard
form layouts, while @wire adapters offer more flexibility for custom logic
and data handling.

79.In Lightning Web Components (LWC), there isn't a direct equivalent

to Aura's refreshView()`method, how can still implement data refresh
functionality?
Reactive Properties with @wire
Change a reactive property that is used by the @wire adapter. When this
property changes, the wire adapter automatically re-fetches the data. This
approach leverages LWC's reactive nature to refresh data.

Imperative Apex Calls

Manually call Apex methods using JavaScript. When you need to refresh
the data, simply call the Apex method again. This gives you explicit control
over when and how data is fetched.

Using refreshApex
If you are using @wire in combination with imperative Apex calls, you can
use refreshApex. This function re-executes the @wire service, refreshing
the data.
// Re-fetches the data wired to wiredRecordResult
refreshApex(this.wiredRecordResult);
80. When and when not to Refresh Data in LDS?
Manual Data Changes Outside of Salesforce UI:
Let’s say, If data is changed outside the standard Salesforce UI, such as
through an external system integration, API call, or custom Apex operation,
and those changes need to be reflected immediately in your LWC.
Use methods like refreshApex to ensure the latest data is displayed.

When Not to Refresh Data in LDS

Standard Data Updates within Salesforce UI
If data is updated through standard Salesforce UI mechanisms (e.g.,
standard record pages, related lists), LDS typically handles these updates
automatically. No manual refresh is needed, as LDS ensures that any such
updates are reflected in the components using LDS.

81. Explain the use case of notifyRecordUpdateAvailable(recordIds)?

Imagine a resturant with a digital ordering system. There are two screens:
1. Order Entry Screen: Where waitstaff enter and update orders.
2. Kitchen Display Screen: Where chefs see the latest orders to
prepare.
Using notifyRecordUpdateAvailable(recordIds)
When an order is updated (for example, a customer changes their meal),
the kitchen should immediately see this update.
After updating the order, the system needs to inform the Kitchen Display
Screen that the order has changed. This is where
notifyRecordUpdateAvailable(recordIds) comes into play. This function acts
like a messenger telling the Kitchen Display Screen, "Hey, the order for
table 5 has been updated."
Refreshing the Kitchen Display:
Upon receiving this notification, the Kitchen Display Screen fetches the
latest data for the updated order.
In the context of Lightning Web Components (LWC),
notifyRecordUpdateAvailable(recordIds) helps keep all parts of the
application in sync by ensuring that any component displaying data stays
up-to-date when that data changes elsewhere in the system. This function
is particularly useful in real-time applications where immediate data
accuracy is crucial.

import { updateRecord, notifyRecordUpdateAvailable } from

'lightning/uiRecordApi';

82. Give syntax for wire service?

Use Cases with Syntax Examples

Fetching a Record with getRecord

import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class AccountDetail extends LightningElement {

@api recordId;

@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD,

INDUSTRY_FIELD] })
account;
}
Fetching Object Info with getObjectInfo
Fetches metadata about a Salesforce object, like its label or available
fields.
import { LightningElement, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class AccountMetadata extends LightningElement {

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo;
}
Using a Custom Apex Method
Fetches data using a custom Apex method.
import { LightningElement, wire, api } from 'lwc';
import getAccounts from
'@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {

@wire(getAccounts) accounts;
}
Reactive Properties: Use $ before a property name in the @wire
configuration to make it reactive. This means the wire service will re-fetch
the data whenever the property value changes.
- Data Handling: The data fetched by @wire can be assigned to either a
property (for automatic updates) or a function (for custom handling).
- Error Handling: When wired to a property, the data structure includes data
and error properties, which can be checked to handle success and error
cases accordingly.
83. Syntax for imperative calls in LWC?
Syntax for Imperative Apex Calls

Calling an Apex Method Imperatively

import getAccounts from

'@salesforce/apex/AccountController.getAccounts' imports the Apex
method.
getAccounts() is called imperatively, usually within a method like
loadAccounts
The method returns a promise, allowing you to handle the response with
.then() and .catch() for success and error handling, respectively.

Apex Class:
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, Industry FROM Account];
}
}
JavaScript Controller:
import { LightningElement, track } from 'lwc';
import getAccounts from
'@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {

 @track accounts;
@track error;

connectedCallback() {
this.loadAccounts();
}

loadAccounts() {
getAccounts()
.then(result => {
this.accounts = result;
})
.catch(error => {
this.error = error;
});
}
}

Calling a Standard LDS Service Imperatively

You can also call standard Lightning Data Service (LDS) functions like
createRecord ,updateRecord, or deleteRecord imperatively.

84.Can we put multiple decorators on a single property in LWC?

No, you cannot put more than one decorator on a single property in LWC.
The LWC framework does not allow this because it would create confusion
for the execution engine, which wouldn't know which decorator to apply
first, potentially leading to performance issues.
// Incorrect usage - will cause an error
@api @track propertyName; // You cannot combine @api and @track

Think of decorators as instructions for a kitchen appliance. If you try to use

both "bake" and "grill" modes at the same time on the same oven, the
appliance won't know which mode to follow, leading to incorrect cooking
results.

85. Can a child component change a property passed from a parent

component?
No, properties passed from a parent component to a child component via
@api are read-only. To modify it, the child component must clone the
property and then make changes to the clone.
Example:The main chef (parent component) sets a recipe (@api property).
The assistant chef (child component) can't change the original recipe
directly but can create a copy to modify for experiments.
// Child Component
@api parentProperty; // Read-only in child component

// Cloning to modify
let clonedProperty = { ...this.parentProperty };
clonedProperty.someField = 'newValue';

86. Can we use the @wire decorator inside a method?

No, the @wire decorator cannot be used inside methods. It must be used
at the class property level or as a method decorator, not inside other
methods.
Code Snippet:
// Correct usage
@wire(getRecord, { recordId: '$recordId' })
wiredRecord;

// Incorrect - inside a method

someMethod() {
@wire(getRecord, { recordId: '$recordId' }) // This is incorrect
wiredRecord;
}
87. When does a @wire property get its value?
Answer: A @wire property gets its value after the component's constructor
runs and before the connectedCallback lifecycle hook. If data isn't
immediately available, the property might initially be undefined and will
update when the data is fetched.
This is like setting up ingredients in the kitchen (constructor) before service
starts (connectedCallback). If some ingredients aren't available yet, they
start with what's available and update as new ingredients arrive.
Code Snippet:
javascript
// @wire property gets value after constructor
@wire(getRecord, { recordId: '$recordId' })
wiredRecord;

88.What is the difference between event.stopPropagation() and

event.preventDefault()?
event.preventDefault() stops the default action associated with an event,
like preventing a form submission. event.stopPropagation() prevents the
event from bubbling up to parent elements, stopping other handlers from
executing.
// Prevent default form submission
handleSubmit(event) {
event.preventDefault();
}

// Stop event bubbling

handleClick(event) {
event.stopPropagation();
}
89. What is the purpose of the export keyword in LWC classes?
The export keyword is used to make the properties and methods in a class
available for import into other modules, allowing the class to be reused
across different components.
// Exporting a class for reuse
export default class MyComponent extends LightningElement {
// Class content
}

7. What is a callback function in JavaScript?

Answer: A callback function is a function passed as an argument to
another function, which can be executed later when needed.
Restaurant Scenario: This is like the chef telling the waiter to notify them
when the order is ready (callback function), so they can prepare the meal
accordingly.
Code Snippet:
javascript
Copy code
function processOrder(callback) {
// Process the order
callback(); // Notify when done
}

processOrder(() => {
console.log('Order is processed');
});
90. What is Promise.all and how does it work?
Promise.all is a method that takes an array of promises and returns a
single promise that resolves when all the promises have resolved. It rejects
if any of the promises are rejected.
Promise.all is like waiting for all dishes in an order to be ready before
serving them to the customer, ensuring that everything is served together.
Promise.all([promise1, promise2]).then(results => {
console.log(results);
});
91. What is Shadow DOM in LWC?
Shadow DOM provides encapsulation for a component's styles and
markup, ensuring they do not interfere with the styles and markup of the
rest of the document.
Shadow DOM is like having a private dining area in a restaurant where the
decor and atmosphere (styles and markup) are different from the main
dining room, ensuring a unique experience that doesn't affect the rest of the
restaurant.
Code Snippet:
javascript
<template>
<p class="shadow-p">Styled independently</p>
</template>

<style>
.shadow-p {
color: red; /* Only affects this component */
 }
</style>

92. Can LWC components be used in record-triggered flows?

No, LWC components are not currently supported in record-triggered flows.
They can be used in screen flows, where user interaction is involved.

93. How does @track differ from @wire in LWC?

@track is used to make a property reactive so that changes to its value
automatically update the DOM. @wire is used to fetch data from Salesforce
services or Apex methods, automatically providing data to the component
and updating it when the data changes.

93. Give code snippet of using LWC components inside Aura

components?
LWC components can be used inside Aura components by wrapping them
in an Aura component.
<!-- Aura component wrapping LWC -->
<aura:component>
<c:myLWCComponent />
</aura:component>

94. What tools do you use for deployment in Salesforce, and how do
they integrate with LWC?
Tools like GitHub and Copado are used for version control and deployment.
In GitHub, developers pull the latest code, commit changes, and push
updates. Copado helps manage the deployment pipeline.
95. What are some best practices in LWC development?
1. Component Reusability: Write reusable components, such as
creating a separate component for displaying toast messages.
2. Use Salesforce Lightning Design System (SLDS): For consistent
UI design.
3. Lazy Loading: Load components or data only when necessary.
4. Security Practices: Use Salesforce Locker Service to prevent
vulnerabilities like cross-site scripting.

96. What are the different cases used in LWC?

• Pascal Case: Used for naming classes (e.g., ReservationForm).
• Camel Case: Used for naming properties and methods (e.g.,
menuItems).
• Kebab Case: Used for naming components in HTML (e.g., <c-menu-
item>).
// Pascal Case for class name
export default class ReservationForm extends LightningElement {
// Camel Case for properties and methods
@track menuItems = [];
}

<!-- Kebab Case for component tag -->

<c-menu-item></c-menu-item>

97.What files are included in an LWC component bundle?

An LWC component bundle typically includes:
• HTML File: For markup.
 • JavaScript File: For logic and handling events.
• XML Configuration File: To define metadata like where the
component can be used.
• Optional CSS File: For styling.
• Optional SVG File: For custom icons.

98.What are the limitations of using Shadow DOM in LWC?

Shadow DOM encapsulates component styling and markup, which can
sometimes lead to limitations, such as:
• Styles not penetrating the shadow boundary.
• Events needing to be explicitly passed across the boundary.

99. What is refreshApex and when is it used?

refreshApex is used to refresh the cached data provided by an Apex
method in a wire service. It is necessary when data may have been
changed by an operation, such as a DML action.
Example: After updating the menu on the website backend, refreshApex
would be used to refresh the displayed menu items, ensuring that
customers see the latest offerings.
Code Snippet:
javascript
import { refreshApex } from '@salesforce/apex';

@wire(getMenuItems) menuItems;
handleMenuUpdate() {
// Perform some update action
refreshApex(this.menuItems); // Refresh the cached data
 }

100. What are the different data binding types in LWC compared to
Aura?
In Aura, data binding is typically two-way, meaning changes in the data
model reflect in the UI and vice versa without extra code. In LWC, data
binding is one-way by default, making it more predictable and easier to
debug.

101. What are styling hooks in LWC, and why are they important?
Styling hooks allow developers to override the default styles of SLDS
components to match their branding. They are important for maintaining
brand consistency across custom components.
:host {
--slds-c-button-brand-color-background: #ff6600; /* Customize button
color */
}
102. What is the purpose of the XML configuration file in an LWC
bundle?
Answer: The XML configuration file in an LWC component bundle
defines the component's metadata, including where it can be used (e.g.,
in an app page, record page, or utility bar) and any design attributes
available for customization in the Lightning App Builder.
Code Snippet:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle
xmlns="http://soap.sforce.com/2006/04/metadata">
 <apiVersion>53.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>

103. What does the <isExposed> tag in the XML configuration file
signify?
The <isExposed> tag indicates whether the LWC component is exposed to
the Lightning App Builder. If set to true, the component can be added to
Lightning pages, such as record pages, app pages, and home pages.
Code Snippet:
<isExposed>true</isExposed>

104. How do you specify where an LWC component can be used in the
XML configuration file?
The <targets> and <target> tags define where the component can be used
within Salesforce, such as on record pages, app pages, home pages, and
in utilities like the utility bar. The <targetConfigs> tag can further specify
details for each target, like which objects the component can be associated
with.
Code Snippet:
<targets>
<target>lightning__RecordPage</target>
 <target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__UtilityBar</target>
</targets>

105. What is the <targetConfig> tag used for in the XML configuration
file?
The <targetConfig> tag specifies additional configuration details for each
target, such as limiting the component's usage to specific Salesforce
objects or setting design attributes that can be configured in the Lightning
App Builder.
Code Snippet:
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
<object>Contact</object>
</objects>
</targetConfig>
</targetConfigs>

106. How can you control the visibility of an LWC component in the
Lightning App Builder?
Visibility can be controlled using the <isExposed> tag and through
<targetConfigs> by specifying criteria such as user profiles, permissions, or
specific conditions that must be met for the component to be displayed.
Code Snippet:
xml
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
<supportedFormFactors>
<supportedFormFactor type="Small" />
<supportedFormFactor type="Large" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>

107. Explain Lazy Loading in LWC?

Imagine a restaurant website where the homepage features various
sections, such as daily specials, customer reviews, and a reservation form.
Initially, the website loads with basic information and images. As the user
scrolls down or interacts with specific sections, additional data or
components are loaded.
Lazy loading is a design pattern used to defer the loading of an object until
it is actually needed, which can improve performance and reduce initial
load times.
Lazy loading in LWC can be achieved through various techniques,
including conditional rendering, event listeners, and using the Intersection
Observer API.
Conditional Rendering
In this approach, parts of the component's template are rendered based on
certain conditions, such as user actions or state changes.
Intersection Observer API
The Intersection Observer API can be used to load components or data
when an element becomes visible in the viewport.

108. What are design attributes in LWC, and how are they configured
in the XML file?
Design attributes are customizable properties of an LWC component that
can be set in the Lightning App Builder. They allow users to configure
component behavior or appearance without changing the code, defined
under the <design> tag in the XML configuration file.

Code Snippet:
<design>
<attribute name="backgroundColor" label="Background Color"
type="String" />
<attribute name="title" label="Section Title" type="String" />
</design>

109. Can LWC components be created in the Salesforce Developer

Console?
No, LWC components cannot be created in the Salesforce Developer
Console. Instead, developers use tools like Visual Studio Code or the Code
Builder (a web-based IDE currently in beta) to develop and manage LWC
components.

110. What are the key properties defined in the XML configuration file
of an LWC component?
• apiVersion: Specifies the Salesforce API version.
 • isExposed: Determines if the component is available in the Lightning
App Builder.
• targets: Lists the areas in Salesforce where the component can be
used, such as record pages, app pages, or community pages.
• targetConfigs: Provides detailed settings for each target, including
object-specific configurations and design attributes.

111. How are SVG files used in LWC, and what is their significance in
the component bundle?
Answer: SVG files in LWC are used to define custom icons for the
component. These icons appear alongside the component’s name in the
App Builder or when the component is used in the UI. The SVG file
provides a scalable graphic that enhances the component’s visual identity.
112. What is Lightning Locker Service, and why is it important?
Lightning Locker Service is a security framework that isolates Lightning
components, ensuring that each component's data and DOM are protected
from others. It prevents common security vulnerabilities like cross-site
scripting (XSS) and ensures secure execution of JavaScript code.
Imagine a large, busy restaurant with several specialized sections: the
kitchen, the bar, and the front desk (for reservations and payments). Each
section needs to operate independently but also securely within the same
environment, ensuring that one section's actions or data do not adversely
affect another.

113. How does Locker Service ensure DOM isolation between

components?
Locker Service enforces DOM isolation by creating separate namespaces
for components, preventing them from accessing each other's DOM
elements.
Code Snippet Example:
javascript
// Component A cannot access Component B's DOM elements directly
// Component A
<template>
<div class="component-a">Component A</div>
</template>

// Component B
<template>
<div class="component-b">Component B</div>
</template>
In this example, Component A and Component B cannot manipulate each
other's DOM elements directly due to Locker Service's isolation.

114. What are some specific restrictions imposed by Locker Service

on JavaScript global objects?
Locker Service restricts access to global objects like window, document,
and their properties. For example, direct access to window.document is
restricted to prevent potential security risks.
Code Snippet Example:
// Allowed: Access to the component's own DOM
this.template.querySelector('div').innerHTML = 'Safe';

// Not Allowed: Direct access to the global document

window.document.querySelector('div').innerHTML = 'Not allowed under
Locker Service';
115. Can Lightning components communicate with each other under
Locker Service? If so, how?
Yes, Lightning components can communicate with each other using public
properties (@api), custom events, or Lightning Message Service (LMS).

116. How does Lightning Message Service (LMS) support

communication across different Salesforce technologies?
Answer: LMS provides a unified messaging mechanism that allows
communication across Lightning Web Components (LWC), Aura
components, and Visualforce pages. It uses a publish-subscribe pattern,
where messages are published to a channel and any component
subscribed to that channel can receive the messages. This enables
different parts of a Salesforce application, which might be built using
different technologies, to interact seamlessly.

117. What is a message channel in LMS, and how is it defined?

A message channel in LMS is a named resource that defines a
communication pathway. It is used to publish and subscribe to messages. A
message channel must be created in Salesforce and can be referenced in
the code to enable messaging between components.
Think of a message channel like a specific intercom line used by different
restaurant sections (like the kitchen or delivery service) to communicate
specific types of information (e.g., order statuses).

118. How can a component unsubscribe from a message channel in

LMS?
A component can unsubscribe from a message channel by calling the
unsubscribe function, passing in the subscription object returned when the
component initially subscribed to the channel.
import { unsubscribe } from 'lightning/messageService';
disconnectedCallback() {
 unsubscribe(this.subscription);
this.subscription = null;
}
}

119. What are the key differences between using LMS and traditional
event handling in Salesforce?
Answer: LMS is designed for cross-component and cross-framework
communication, allowing LWCs, Aura components, and Visualforce pages
to communicate seamlessly. Traditional event handling, such as using
custom events, is typically limited to components within the same hierarchy
or framework.

120. When should you use LMS over traditional parent-child

communication methods in Salesforce?
LMS should be used when the components that need to communicate are
not in a direct parent-child relationship, especially if they are different types
of components (LWC, Aura, Visualforce) or if they reside on different parts
of a Lightning page.

121. What is Lightning Message Service (LMS) and how does it differ
from Pub/Sub?

Imagine a large restaurant chain that has multiple systems, like the kitchen
display, order-taking system, and delivery tracking. These systems are built
using different technologies. For example, the kitchen display might be a
traditional web application, the order-taking system might be an advanced
web component, and the delivery tracking might be on a Visualforce page.

LMS acts like a central dispatcher for messages. If an order status changes
(e.g., an order is ready for pickup), the LMS can notify all systems,
regardless of their technology. So, the kitchen can update the display, the
waitstaff can see the status change on their order-taking system, and the
delivery tracking system updates for the delivery staff.

In a Pub/Sub model, the system is much more informal and decentralized.

Messages are sent out, and any interested listener can receive them. The
sender (chef) doesn't need to know who the receivers are (waiters).

Pub/Sub is great for simple, direct messaging where the sender and
receiver don't need to be tightly integrated. It's easier to implement for
basic needs, but lacks the cross-platform capabilities of LMS.