Lightning Web Components Interview Questions

Lightning Web Components Interview Questions

11. How we can access elements in controller

We have two methods available here:

this.template.querySelector();

this.template.querySelectorAll();

Eg:

<!-- example.html -->
<template>
   <div>First <slot name="task1">Task 1</slot></div>
   <div>Second <slot name="task2">Task 2</slot></div>
</template>

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

export default class Example extends LightningElement {
    renderedCallback() {
        this.template.querySelector('div'); // <div>First</div>
        this.template.querySelector('span'); // null
        this.template.querySelectorAll('div'); // [<div>First</div>, <div>Second</div>]
    }
}

12. What is the default value of Boolean property

False. We should give default value if we want to update value later.

13. How we can load third party JavaScript (JS) library in Lightning Web Components (LWC)

We have few ways here: using which we can load third party library:

  • Import the static resource.
import resourceName from '@salesforce/resourceUrl/resourceName';
  • Import methods from the platformResourceLoader module.
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
// libsD3.js
/* global d3 */
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import D3 from '@salesforce/resourceUrl/d3';
import DATA from './data';

export default class LibsD3 extends LightningElement {
    svgWidth = 400;
    svgHeight = 400;

    d3Initialized = false;

    renderedCallback() {
        if (this.d3Initialized) {
            return;
        }
        this.d3Initialized = true;

        Promise.all([
            loadScript(this, D3 + '/d3.v5.min.js'),
            loadStyle(this, D3 + '/style.css')
        ])
            .then(() => {
                this.initializeD3();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading D3',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }

    initializeD3() { //some code }

we have few more methods available here:

loadScript(this, resourceName + '/lib.js')
    .then(() => { /* callback */ }); // Without CSS

Load multiple files:

Promise.all([
    loadScript(this, resourceName + '/lib1.js'),
    loadScript(this, resourceName + '/lib2.js'),
    loadScript(this, resourceName + '/lib3.js')
]).then(() => { /* callback */ });

14. Is it possible to call Third party API from LWC JS

By default, we can’t make WebSocket connections or calls to third-party APIs from JavaScript code. To do so, add a remote site as a CSP Trusted Site.

The Lightning Component framework uses Content Security Policy (CSP), which is a W3C standard, to control the source of content that can be loaded on a page. As a result the default CSP policy doesn’t allow API calls from JavaScript code. So to change the policy, and the content of the CSP header, by adding CSP Trusted Sites.

15. How to access static resource

You can check details here: Use Static Resource in Lightning Web Components

16 How to get current User ID?

You can check details here: GetCurrent User Details in Lightning Web Components

17. How we can make changes in components body after it rendered?

The renderedCallback() is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase.

This hook flows from child to parent. A component is usually rendered many times during the lifespan of an application. To use this hook to perform a one-time operation, use a boolean field like hasRendered to track whether renderedCallback() has been executed. So The first time renderedCallback() executes, perform the one-time operation and set hasRendered = true. If hasRendered = true, don’t perform the operation.

18. What are the decorators in LWC

@api

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.

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

@track

Fields are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value.

There is one use case for @track. When a field contains an object or an array, there’s a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track.

@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 adapter or an Apex method.

19. How to call Apex in Lightning Web Components

You can check details here: Call Apex method from Lightning Web Components

20. How we can use Lightning Web Components in Visualforce

You can check details here: Use Lightning Web Components in Visualforce

Pages: 1 2 3 4
%d