LIGHTNING

WEB
COMPONENTS
INTERVIEW QUESTIONS

Created By
Bhanu Prakash
Q. What is Lightning Web Components?

Lightning Web Components are an updated web standards-based

framework method for creating lightning components on the Salesforce
Platform, Lightning Web Components utilize standard tech like CSS,
HTML, and updated JavaScript without requiring a set framework,
incorporating the latest innovations in JavaScript, including Shadow
Document Object Model(DOM), custom elements, and web components
(ECMAScript 7 is specifically the updated JavaScript language used).

Q. Why we need to use LWC we already have aura components

Faster Sites & Better Performance: LWC is a lightweight framework which

is built on web standards and because there is no added abstraction
layer, LWC is likely to render faster than aura components since
performance is important to deliverability.

Q. What are benefits of LWC?

·Standardized-based architecture, can build components for pages
faster.
·Code reuse is supported for quicker deployments.
·Support unit testing for quality assurance.
·Access to more developer talent who can quickly use Lightning Web
Components to create desired solutions.

Q. What is difference between lightning and LWC?

Aura-based Lightning components are built using both HTML and
JavaScript, but LWC is built directly on the Web stack. A developer who
works on LWC is not only using coding skills on a particular framework
but in other frameworks like React or Angular, which are based on the
Web Stack.

Q. What are the limitations of LWC?

·Quick Action API
·Custom Actions
·Global Actions
·Related List View Actions
·Chatter Extensions
·Omni Toolkit API
·Salesforce Console APIs don't support Lightning web components. And
these are the Salesforce console APIs: Navigation Item API, Workspace
API, Utility Bar API
·URL Addressable Tabs
·You cannot use email templates in the LWC component.

Q. Can Aura components contain LWC?

You can compose Aura components from Lightning web components,
but not the other way around. To communicate down the hierarchy,
parents set properties on children. To decide when and how to nest a
Lightning web component in an Aura component, it's important to
understand facets and slots.
Q. Can we communicate between aura and LWC?
You can easily do this, but you need to know how the communication
channels work between component types. Once you see how easy it is to
communicate between components it'll be much easier to switch to
LWC's to do development for everything moving forward.

Q. Can we pass data from Aura to LWC?

The events in LWC are dispatched using standard DOM events. Standard
DOM events are used to communicate up in the component hierarchy
(similar to component events in LC) To communicate between
components not in the hierarchy, publish-subscribe (PUB-SUB) event
model is utilized.

Q. Does LWC support two-way binding?

LWC is designed with a one-way data binding approach. Initially this can
feel frustrating, especially for people who have come to love the
simplicity of two ways. Lightning web components allow one way binding
but aura support two-way binding

Q. How do I communicate between two components in Salesforce?

Create a Lightning Message Channel with help of Publisher Component
then create Subscriber component.

Q. What is the lifecycle of LWC?

Lightning web components have their own lifecycle managed by the
Salesforce framework. The framework creates components, inserts them
into the DOM, renders them, and removes them from the DOM. It also
monitors components for property changes.

When LWC is created a

Constructor is invoked which is similar to init method in aura component
one change is flow on constructor is from parent to child. Then is
inserted into DOM
Connected Call Back is whenever then component is rendering
Render it is used to override functionality of LWC.
Rendered call back it is called once component is rendered and passed
to child to parent
Error Call back: Whenever a component throw error it will catch error
object.
Disconnected call back: when component is removed from DOM is
disconnect call back (used in PUB-SUB model)
Q. Can I use multiple decorators on one property in LWC?
A property can only have only one decorator at a time.

Q. What are callback functions in LWC?

A callback function is a function passed into another function as an
argument, which is then invoked inside the outer function to complete
some kind of routine or action.

Q. What are decorators in LWC?

@api: It is used to expose a variable or functions publically and make
properties reactive.
@track: It is used to make variable private but reactive. Tracked
properties are also called private reactive properties.
@wire: To read Salesforce data, Lightning web components use a
reactive wire service. When the wire service provisions data, the
component rerenders. Components use @wire in their JavaScript class
to specify a wire adaptor or an Apex method.

Q. Can we import apex variables from LWC?

No, we cannot import Apex variable from Apex class

Q. How many files are created in LWC?

Our LWC component by default has 3 files: . html, . js and meta. xml.

Q. What is difference between wire and imperative in LWC?

Wire is closely associated with the change of A or B but the Imperative is
called on click of a button

Q. Can we call LWC from Aura component?

LWC component function should be declared as public starting using
@api decorator. We can invoke the LWC component through the Aura
component using aura:id.

Q. What is Lightning locker in LWC?

Lightning Locker is a powerful security architecture for Lightning
components. Lightning Locker enhances security by isolating Lightning
components that belong to one namespace from components in a
different namespace.
Q. Can we have 2 wire method in LWC?
There are times were we may have multiple wire methods in the same
Lightning Web Component.

Q. What is promise all in LWC?

Promise lets asynchronous methods return values like synchronous
methods: instead of immediately returning the final value, the
asynchronous method returns a promise to supply the value at some
point in the future.

Q. What is lazy loading in LWC?

Lazy loading in Salesforce allows you to load the data only when it is
required. It wouldn't keep on loading if you don't want it to load. With
infinite loading, you can scroll and load a subset of data. Similarly, if you
scroll more, you can load more data.

Q. How do I refresh Apex in LWC?

To refresh Apex data provisioned via an Apex @wire , call refreshApex() .
The function provisions the data using the configuration bound to the
@wire and updates the cache.

Q. What are callback functions in LWC?

A callback function is a function passed into another function as an
argument, which is then invoked inside the outer function to complete
some kind of routine or action.

Q. What is async and await in LWC?

Async functions are instances of the AsyncFunction constructor, and the
await keyword is permitted within them. The async and await keywords
enable asynchronous, promise-based behavior to be written in a cleaner
style, avoiding the need to explicitly configure promise chains.

Q. What is lightning element in LWC?

import { LightningElement } from 'lwc';
LightningElement is a custom wrapper of the standard HTML element.
Extend LightningElement to create a JavaScript class for a Lightning web
component. You can't extend any other class to create a Lightning web
component.

Q. How do you call a static resource in LWC?

To access Static Resources in Lightning web components first we have to
import from @salesforce/resourceUrl to the component's JavaScript file.
import myResource from
'@salesforce/resourceUrl/namespace__resourceReference';
myResource – A name that refers to the static resource

Q. Can we use debugger in LWC?

Debugging on org can be done by setting breakpoints in code once we
enable Lightning to run in the debug mode. Use the Sources tab in
chrome and look under the lightning/page/modules/c folder to find your
component. js file. Add JavaScript breakpoints to step through the code.
Q. Can we override standard button with LWC?
We can override standard buttons such as New, Edit and View using aura
components, as of writing this we currently cannot use Lightning web
components to override standard buttons.

Q. What is @AuraEnabled in Apex?

The @AuraEnabled annotation enables client-side and server-side access
to an Apex controller method. Providing this annotation makes your
methods available to your Lightning components (both Lightning web
components and Aura components). Only methods with this annotation
are exposed.

Q. Why is @RestController used?

RestController is used for making restful web services with the help of
the @RestController annotation. This annotation is used at the class
level and allows the class to handle the requests made by the client

Q. Is it is mandatory to write cacheable = true for aura enabled method

bind with @wire decorator?
Yes, @wire need to cache enabled.

Q. Can we write cacheable = true on server side method called using

imperative way in LWC?

Q. Can we make the wire method to refresh forcefully and bring fresh
data from server?
Yes, by using Refreshapex method

Q. What are custom events in LWC?

Custom Event is used to make the communication from Child
Component to Parent Component
·Parent to Child Event communication in LWC
·Custom event communication in Lightning Web Component (Child to
Parent)
·Publish Subscriber model in Lightning Web Component.

Q. What is Event Propagation?

Event propagation typically involves two phases event bubbling and
event capturing.

Q. How can include LWC component in application?

In order to use lightning web component in application we need to
specify tags in meta.xml file
Lightning_AppPage : to add component in app page
Lightning_RecordPage to add component in record page
Lightning_HomePage to add component in Home page

Q. Can we add spinner in lightning web component?

You need to use lightning-spinner using lightning design system.
Q. Can we add toast message in LWC?
In order to add toast message firstly we need to import showToastevent
then
Import {ShowToastEvent} from ‘lightning/platfromShowToastEvent’;
Create instance of showToastEvent with desire parameters
Const toastEvent = new ShowToastEvent ({
Title: ‘Success!’,
Message: ‘Contact List Updated’,
Variant:’success’,
Mode:’dismissable’
});
Q. How to include LWC component inside VF Page?
We can add LWC component in aura component then we need to add
aura component in visual force page using lightning out.
Q. What is Validity attribute in LWC?
setCustomValidity
Q. How can we iterate list in LWC?
By use foreach and iterator.