Lightning Web Components Interview Questions -Part 1

We will share questions related to Lightning Web Components Interview Questions. These questions are basic and medium level questions and will be helpful for everyone.

1. What are Lightning Web Components (LWC)?

We can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code we write is standard JavaScript and HTML.

2. What is the file structure of Lightning Web Components?

A component bundle contains:

myComponent folder
myComponent.html
myComponent.js
myComponent.js-meta.xml
myComponent.css
myComponent.svg

The folder and its files must follow these naming rules:

• Can’t contain a hyphen (dash)
• Must begin with a lowercase letter
• Can’t include whitespace
• Contain only alphanumeric or underscore characters
• Can’t end with an underscore
• Must be unique in the namespace
• Can’t contain two consecutive underscores

3. How can you display component HTML conditionally?

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.

4. How do we bind data in LWC?

In the template, surround the property with curly braces, {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. In the template, the property can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). LWC doesn’t allow computed expressions like person[2].name['John'].

<!-- hello.html -->
<template>
    Hello, {greeting}!
</template>

// hello.js
import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    greeting = 'World';
}

Don’t add spaces around the property — for example, { data } is not valid HTML.

5. How do we pass data from HTML to the JS controller?

We can use the onchange attribute to listen for a change to its value. When the value changes, the handleChange function in the JavaScript file executes. Notice that to bind the handleChange function to the template, we use the same syntax, {handleChange}.

<!-- helloBinding.html -->
<template>
    <p>Hello, {greeting}!</p>
    <lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>
</template>

// helloBinding.js
import { LightningElement } from 'lwc';

export default class HelloBinding extends LightningElement {
    greeting = 'World';

    handleChange(event) {
        this.greeting = event.target.value;
    }
}

We can use the same event handler with multiple fields as well:

<lightning-input name="firstName" label="First Name" onchange={handleChange}></lightning-input>
<lightning-input name="lastName" label="Last Name" onchange={handleChange}></lightning-input>

handleChange(event) {
    const field = event.target.name;
    if (field === 'firstName') {
        this.firstName = event.target.value;
    } else if (field === 'lastName') {
        this.lastName = event.target.value;
    }
}

6. How do we iterate a list in Lightning Web Components (LWC)?

We have two options available here:

for:each — use for:item="currentItem" to access the current item. To access the current item’s index, use for:index="index". To assign a key to the first element in the nested template, use the key={uniqueId} directive.

<template for:each={contacts} for:item="contact">
    <li key={contact.Id}>
        {contact.Name}, {contact.Title}
    </li>
</template>

Iterator — to apply special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}, on a template tag. Use iteratorName to access these properties: value (the item’s value), index, first (boolean), and last (boolean).

<template iterator:it={contacts}>
    <li key={it.value.Id}>
        <div if:true={it.first} class="list-first"></div>
        {it.value.Name}, {it.value.Title}
        <div if:true={it.last} class="list-last"></div>
    </li>
</template>

7. Can we display multiple templates?

Yes, we can. We can import multiple HTML templates and write business logic that renders them conditionally — this pattern is similar to code splitting used in some JavaScript frameworks.

Create multiple HTML files in the component bundle, import them all, and add a condition in the render() method to return the correct template depending on the component’s state. The returned value from render() must be a template reference — the imported default export from an HTML file.

// MultipleTemplates.js
import { LightningElement } from 'lwc';
import templateOne from './templateOne.html';
import templateTwo from './templateTwo.html';

export default class MultipleTemplates extends LightningElement {
    templateOne = true;

    render() {
        return this.templateOne ? templateOne : templateTwo;
    }

    switchTemplate() {
        this.templateOne = this.templateOne === true ? false : true;
    }
}

Component file structure:

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   ├──myComponent.css
   ├──secondTemplate.html
   └──secondTemplate.css

8. What are public properties in a Lightning Web Component?

Public properties are reactive. If the value of a public property changes, the component rerenders. To expose a public property, decorate a field with @api. Public properties define the API for a component.

9. How do you set a property from a parent component to a child component?

To communicate down the containment hierarchy, an owner can set a property on a child component. An attribute in HTML turns into a property assignment in JavaScript.

// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName;
}

<c-todo-item item-name="Milk"></c-todo-item>
<c-todo-item item-name="Bread"></c-todo-item>

10. How do we pass data from a parent component to a child component?

LWC supports one-way data transfer from parent to child. A non-primitive value (like an object or array) passed to a component is read-only, so the component cannot change the content of the object or array — if the component tries to change the content, we get errors in the console.

We can pass primitive data types as most components support this without restriction.