Salesforce LWC - Uncommon and Difficult, Tough, Tricky Interview Questions Answers | LWC interview: Advance Level

 

1. How is LWC different from the Lightning Aura framework? Which is better to use?

• Aura components are upgraded to LWC to better utilize modern JavaScript and Web Stack. It was not possible for Salesforce to come with LWC before as the Web Stack would not support it. So, it is an upgraded version of the Aura component, hence it is always better in every way.

• However, when you develop Lightning web components, you also may need to use Aura, because LWC doesn’t yet support everything that Aura does. Always choose Lightning Web Components unless you need a feature that isn’t supported.

• Lightning web components are custom HTML elements built using HTML and modern JavaScript.

• Lightning Web Components uses core Web Components standards and runs natively in browsers, therefore, Lightning Web Components is lightweight and delivers exceptional performance.

• Aura components can be integrated within LWC, but it is not the same vice versa.

• Utilizing modern JavaScript makes it easier to be adopted by non-native Salesforce developers.

• Following components are created once you create an LWC project.

• myComponent folder

• myComponent.html

• myComponent.js

• myComponent.js-meta.xml

2. Writing some basic syntax of LWC. Coding structure in LWC.

<!-- helloWorld.html -->

<template>

    Hello, {firstName}!

</template>

// helloWorld.js

import { LightningElement } from "lwc";

export default class HelloWorld extends LightningElement {

  firstName = "World";

}

//helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">

  <apiVersion>45.0</apiVersion>

  <isExposed>true</isExposed>

  <targets>

    <target>lightning__AppPage</target>

    <target>lightning__HomePage</target>

  </targets>

</LightningComponentBundle>

3. Iterating list in LWC.

• for:each

<template for:each={contacts} for:item="contact">

{contact.Name}

</template>

• Iterator - to define a special use to the first or last item in a list, use the iterator directive

<template iterator:it={contacts}>

{it.value.Name}

</template>

4. Passing data from parent component to child component in LWC.

• LWC supports one-way data-binding - from parent and child components.

• A non-primitive data type (object or array) passed to a component remains read-only, modifying it from a child will result in an error.

5. Accessing elements in controller js

• Two methods available for this: this.template.querySelector(); and this.template.querySelectorAll();

  this.template.querySelector('div');//<div>first</div> in HTML

  this.template.querySelectorAll('div'); All div in HTML

6. What is the default value of the Boolean property?

False.

7. What is Lightning Message Service (LMS)? How does it work step-by-step?

LMS was introduced in the Winter '20 release by Salesforce. It is an OOTB functionality that enables you to communicate across DOM within a Lightning page i.e. between Visualforce and Lightning Components, including Lightning Aura and Lightning Web Components. The pubsub module is deprecated and you will need to use LMS to establish strong communication channels between components.

• Create a messaging channel using LightningMessageChannel metadata type.

// Syntax

import channelName from '@salesforce/messageChannel/channelReference';

• Publish the messaging channel once you set the scope of the channel.

// To pass scope, you must get a message context.

@wire(MessageContext)messageContext;

const payload = { recordId: event.target.contact.Id };

publish(this.messageContext, recordSelected, payload);

• Components can subscribe to the channel to get the data published to the channel.

// Import message service features required for subscribing and the message channel

import {

    subscribe,

    unsubscribe,

    APPLICATION_SCOPE,

    MessageContext

} from 'lightning/messageService';

// Encapsulate logic for Lightning message service subscribe and unsubsubscribe

    subscribeToMessageChannel() {

        if (!this.subscription) {

            this.subscription = subscribe(

                this.messageContext,

                recordSelected,

                (message) => this.handleMessage(message),

                { scope: APPLICATION_SCOPE }

            );

        }

    }

    unsubscribeToMessageChannel() {

        unsubscribe(this.subscription);

        this.subscription = null;

    }

Examples - https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation

Metadata API Developer Guide Reference - https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_lightningmessagechannel.htm

Limitations -

• Does not support Lightning mobile app for visualforce components.

• You need to use @wire(MessageContext) decorator to define scope for the subscribing components

8. Can an LWC be wrapped around Aura or can an Aura include LWC?

An LWC cannot contain an Aura component. When you create a Lightning web component, its DOM subtree has to be composed entirely of Lightning web components. 

To use an unsupported experience or feature or to use an unsupported interface, develop a Lightning web component and wrap it in an Aura component that simply accesses the experience, feature, or interface.

9. Can we have a CSS file in the LWC resource bundle?

Yes

10. What is the maximum number of components that you can include in an LWC?

Unlimited 

11. Can child components inherit parent CSS?

Yes

12. You cannot integrate LWC with another framework, such as React, Angular, etc.

For any clarifications or other topics, please comment.