Part – 2 | 50 LWC Lightning Web Component Interview Questions

Table of Contents

• What are bound expressions and what are unbound expressions?
• What is the use of renderer in Aura?
• Which interface should you use if you want your component to be used as a tab?
• What is Lightning Out?
• What is Lightning:isUrlAddressable interface?
• How to use an external library in Aura Component?
• What is the use of aura:method in lightning aura component?

29. What is the use of lightning:recordFrom?

<lightning:recordForm> in Salesforce Aura components is used to quickly create forms for viewing, creating, or editing a record. It automatically generates a form with fields based on the provided object name and layout type, saving time by eliminating the need for manual field configuration. This component simplifies data handling by supporting standard object actions like saving, deleting, and loading, and it handles field validation and layout customization. Additionally, it provides easy integration with Salesforce’s standard UI styling, making it efficient for rapid development with a consistent look and feel across Lightning pages.

Below is the example for the same:

<lightning-record-form
    record-id="001XXXXXXXXXXXXXXX"
    object-api-name="Account"
    layout-type="Compact"
    columns="1"
    mode="readonly">
</lightning-record-form>

See also: Collections in Salesforce Apex

Our Salesforce course at CRS Info Solutions offers real-time, job-oriented training designed to equip you with practical skills and knowledge. Sign up for a free demo today to experience our hands-on approach to learning Salesforce.

30. When to use force:recordData and when not to?

force:recordData is used as a Constructor for Salesforce Aura Component which is used to either get or create a record. 

force:recordData is useful when we are working with a single record and not useful for bulk records.

Below is simple syntax

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <!-- Attribute to hold the record ID -->
    <aura:attribute name="recordId" type="String" default="001XXXXXXXXXXXXXXX" />

    <!-- Attributes for record data, selected fields, and error messages -->
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />
    <aura:attribute name="recordError" type="String" />

    <!-- Using force:recordData for quick access and update of specific fields -->
    <force:recordData aura:id="recordEditor"
                      recordId="{!v.recordId}"
                      fields="Name, BillingCity, BillingState"
                      targetRecord="{!v.record}"
                      targetFields="{!v.simpleRecord}"
                      targetError="{!v.recordError}"
                      mode="EDIT" />

    <!-- Display the record fields -->
    <lightning:input label="Name" value="{!v.simpleRecord.Name}" />
    <lightning:input label="Billing City" value="{!v.simpleRecord.BillingCity}" />
    <lightning:input label="Billing State" value="{!v.simpleRecord.BillingState}" />

</aura:component>

Explanation

• Attributes:
  • recordId holds the ID of the record to fetch.
  • record, simpleRecord, and recordError handle the full record data, selected fields, and errors, respectively.
• forceComponent:
  • fields: Specifies the fields to retrieve (Name, BillingCity, BillingState).
  • mode="EDIT": Loads the record in edit mode, allowing direct modifications.

In this example, <force:recordData> is ideal since we need straightforward data access and binding for a few fields, without additional processing or custom logic.

See also: Salesforce Developer interview questions for 5 years experience

31. Is LWC Replacing the Aura Component?

Ans: Yes, LWC (Lightning Web Components) is gradually replacing Aura components as Salesforce’s preferred development model. LWC offers better performance, a modern framework, and aligns closely with standard web technologies, making it more efficient for building responsive and scalable applications. However, Aura components are still supported and may coexist with LWC, especially in legacy applications. While new development is encouraged in LWC, existing Aura components will remain compatible within the Salesforce platform.

See also: Custom Page Layouts

Check out these top Salesforce interview questions and answers for extensive knowledge and informative details about Salesforce Admin, Developer, Integration, and LWC modules.

32. What are bound expressions and what are unbound expressions?

{#expression} (Unbound Expressions)

{!expression} (Bound Expressions)

<c:child childAttr=”{!v.parentAttr}” />

<c:child childAttr=”{#v.parentAttr}” />

{#v.parentAttr} is an unbound expression. Any change to the value of the childAttr attribute in c:child doesn’t affect the parentAttr attribute in c:parent and vice versa.

{!expression} (Bound Expressions) Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.

For more information use this link

61 LWC Lightning Web Component Interview Questions

33. What is the use of a design component in Aura?

In Aura, a design component (the .design file) is used to define customizable attributes of a Lightning component that can be configured within the Lightning App Builder, Experience Builder, or Community Builder. This allows admins to set specific values for component attributes directly in the builder interface, enhancing reusability and configurability without modifying the component’s code.

Use Case Example:

Let’s create a simple Aura component where the design file allows the admin to set a title attribute and specify a backgroundColor.

1. Component Markup (MyCustomComponent.cmp):

<aura:component >
    <!-- Attribute declarations -->
    <aura:attribute name="title" type="String" default="Default Title" />
    <aura:attribute name="backgroundColor" type="String" default="white" />

    <!-- Component Content -->
    <div style="{! 'background-color:' + v.backgroundColor }">
        <h1>{!v.title}</h1>
        <p>This is a configurable Aura component.</p>
    </div>
</aura:component>

2. Design File (MyCustomComponent.design):

The design file is where we define which attributes are configurable in the builder. Each attribute can have a <design:attribute> entry, making it available for configuration.

<design:component label="My Custom Component">
    <!-- Configurable title attribute with a label shown in the builder -->
    <design:attribute name="title" label="Component Title" />

    <!-- Configurable backgroundColor attribute with a dropdown of options -->
    <design:attribute name="backgroundColor" label="Background Color">
        <design:option label="White" value="white" />
        <design:option label="Light Gray" value="lightgray" />
        <design:option label="Yellow" value="yellow" />
    </design:attribute>
</design:component>

Explanation:

• Attributes in the Component: The component has two attributes: title and backgroundColor. These are bound in the HTML structure to display the title and set the background color dynamically.
• Attributes in the Design File:
  • The .design file exposes title and backgroundColor as configurable options.
  • For backgroundColor, it provides a dropdown with predefined color options (white, lightgray, yellow).

When used in the App Builder, this component will display fields for title and backgroundColor, allowing the admin to adjust the text and background color without changing any code. This flexibility enables easy customization while keeping the component reusable across different pages and contexts.

34. What is the use of renderer in Aura?

In Aura, the renderer is used to customize the rendering process of a component. It allows you to control or override specific rendering behaviors, such as how the component appears initially, updates after data changes, or cleans up when destroyed. Renderers are commonly used to improve performance, apply specific logic during render cycles, or update the DOM directly when needed.

When to Use a Renderer:

• When you need custom DOM manipulation that cannot be achieved declaratively in the component markup.
• When optimizing performance, especially for complex or frequently updated components.
• When implementing additional behaviors during rendering, rerendering, or unrendering phases.

Renderer Lifecycle Methods:

Aura components have a few key lifecycle methods in the renderer:

1. render: Executed when the component renders initially.
2. rerender: Called when the component is re-rendered due to data changes.
3. afterRender: Executes after the component has been rendered.
4. unrender: Called when the component is removed from the DOM.

Code Example

Here’s an example of a renderer in Aura that modifies behavior based on custom logic.

Component Markup (MyComponent.cmp):

<aura:component >
    <aura:attribute name="message" type="String" default="Hello, Aura!" />
    <div aura:id="messageContainer">{!v.message}</div>
</aura:component>

Renderer (MyComponentRenderer.js):

({
    render: function (component, helper) {
        // Custom behavior before rendering
        console.log("Rendering the component for the first time.");
        
        // Call the base render function to proceed with normal rendering
        return this.superRender();
    },

    rerender: function (component, helper) {
        // Custom behavior when the component is re-rendered
        console.log("Re-rendering the component due to data changes.");

        // Call the base rerender function
        this.superRerender();
        
        // Custom logic: dynamically update style or modify DOM if needed
        var messageContainer = component.find("messageContainer");
        if (messageContainer) {
            messageContainer.getElement().style.color = "blue";
        }
    },

    afterRender: function (component, helper) {
        // Executes after rendering is complete
        console.log("After render: component is now fully rendered.");

        // Call the base afterRender function
        this.superAfterRender();
    },

    unrender: function (component, helper) {
        // Cleanup any resources before the component is removed
        console.log("Cleaning up before the component is removed.");

        // Call the base unrender function
        this.superUnrender();
    }
});

Explanation:

1. render: Logs a message when the component is initially rendered. It then calls this.superRender() to execute the standard render behavior.
2. rerender: Logs a message when the component re-renders due to changes in the data. Additionally, it finds the messageContainer element and sets the text color to blue. After the custom logic, this.superRerender() is called to handle the default rerender behavior.
3. afterRender: Executes after rendering is complete. Here, a log message indicates that the component is fully rendered, and then this.superAfterRender() is called to handle any default post-render behavior.
4. unrender: This method provides cleanup logic before the component is removed from the DOM. The example logs a message and calls this.superUnrender() to handle any necessary cleanup.

Key Points

• Custom Rendering: You can insert custom logic before, during, or after the component’s render cycles.
• DOM Manipulation: Renderer functions provide direct access to the DOM, which is useful for custom styling or interaction with elements.
• Efficiency: Renderers should be used sparingly to avoid unnecessary processing and maintain performance, especially in frequently updated components.

See also: Page Layouts

35. Can we make a callout from Aura Component?

Ans:

Yes, you can make a callout from an Aura component, but the callout must be initiated from an Apex controller. Aura components themselves cannot directly make HTTP callouts to external services; instead, they invoke an Apex method that performs the callout and returns the response to the component.

Steps to Make a Callout from an Aura Component

1. Create an Apex Controller to handle the HTTP callout.
2. Invoke the Apex Controller from the Aura Component using @AuraEnabled methods.
3. Handle the Response in the Aura component to display or process the data.

Example: Making a Callout from an Aura Component

In this example, we’ll set up an Aura component that makes a callout via an Apex controller to fetch data.

1. Apex Controller (MyCalloutController.cls)

This Apex controller includes a method to make a callout to a sample API endpoint.

public with sharing class MyCalloutController {
    // Annotate the method with @AuraEnabled and make it cacheable=false if you need real-time data
    @AuraEnabled(cacheable=false)
    public static String fetchData() {
        // Define the API endpoint
        String endpoint = 'https://jsonplaceholder.typicode.com/posts/1';
        
        // Create an HTTP request and response
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        request.setEndpoint(endpoint);
        request.setMethod('GET');

        // Execute the callout and capture the response
        HttpResponse response = http.send(request);
        
        // Return the response body as a string
        return response.getBody();
    }
}

2. Aura Component (CalloutComponent.cmp)

This Aura component calls the fetchData method in the Apex controller and displays the response.

<aura:component controller="MyCalloutController" implements="force:appHostable" access="global">
    <!-- Attribute to store the response data -->
    <aura:attribute name="responseData" type="String" />
    
    <!-- Button to initiate the callout -->
    <lightning:button label="Fetch Data" onclick="{!c.handleFetchData}" />
    
    <!-- Display the response data -->
    <lightning:formattedText value="{!v.responseData}" />
</aura:component>

3. JavaScript Controller (CalloutComponentController.js)

This JavaScript controller calls the Apex method and handles the response.

({
    handleFetchData: function(component, event, helper) {
        // Call the Apex method
        var action = component.get("c.fetchData");
        
        // Set up callback function to handle the response
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                // Set the response data in the component attribute
                component.set("v.responseData", response.getReturnValue());
            } else if (state === "ERROR") {
                // Handle errors if any
                var errors = response.getError();
                if (errors && errors[0] && errors[0].message) {
                    console.error("Error: " + errors[0].message);
                }
            }
        });

        // Enqueue the action
        $A.enqueueAction(action);
    }
});

Explanation

1. Apex Controller (fetchData method): Makes an HTTP GET request to an external API endpoint. The @AuraEnabled annotation allows the method to be called from the Aura component.
2. Aura Component: Contains a button to trigger the callout and a formatted text element to display the response.
3. JavaScript Controller (handleFetchData function): Calls the Apex method fetchData and sets the returned data in the responseData attribute. It handles success and error cases appropriately.

Important Notes

• Asynchronous Call: All calls to Apex from Aura are asynchronous, so you need to handle the callback response.
• Security: Ensure that the external endpoint is added to Remote Site Settings in Salesforce to allow the callout.
• Governor Limits: Be mindful of Salesforce governor limits, especially if multiple callouts are required.

36. Can we use Continuation in Aura Components?

Ans: Yes. We can use it and the process is the same. Here is the link for the same

37. Which interface should you use if you want to get the id of the record from the record Detail page?

Ans: force:hasRecordId

See also: Roles and Profiles

38. How to get the recordId and Object API name inside an aura component if the component is being used inside a record detail page?

To access the recordId and objectApiName inside an Aura component when it’s used on a record detail page, you can leverage the force:hasRecordId and force:hasObjectName interfaces. These interfaces automatically provide the recordId and objectApiName when the component is used within the context of a record page in Lightning Experience.

Example: Accessing recordId and objectApiName in Aura Component

Here’s a sample Aura component setup that retrieves and displays the recordId and objectApiName.

1. Component Markup (RecordInfoComponent.cmp)

<aura:component implements="force:hasRecordId, force:hasObjectName, flexipage:availableForRecordHome" access="global">
    
    <!-- Attributes to hold recordId and objectApiName -->
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="objectApiName" type="String" />

    <!-- Display the record ID and Object API Name -->
    <lightning:card title="Record Information">
        <p class="slds-p-horizontal_small">
            <strong>Record ID:</strong> {!v.recordId}
        </p>
        <p class="slds-p-horizontal_small">
            <strong>Object API Name:</strong> {!v.objectApiName}
        </p>
    </lightning:card>

</aura:component>

Explanation

1. Interfaces:
   • force:hasRecordId: Enables automatic retrieval of recordId when the component is placed on a record page.
   • force:hasObjectName: Enables automatic retrieval of objectApiName (e.g., Account, Contact) based on the context.
2. Attributes:
   • recordId: Holds the ID of the record on the record detail page.
   • objectApiName: Holds the API name of the object (like Account or Contact) for the current record.
3. Output:
   • The recordId and objectApiName are displayed in a lightning:card component.

Usage

When you add this component to a record page in Lightning App Builder, it will automatically display the recordId and objectApiName of the record it’s associated with, thanks to the force:hasRecordId and force:hasObjectName interfaces. There’s no need to pass these values manually; they are provided by the context of the record page.

See also: Salesforce Marketing Cloud Developer Interview Questions

39. Which interface should you use if you want to override a standard action?

In Lightning Web Components (LWC), to override a standard action (like “New,” “Edit,” or “View”) on a Salesforce object, you need to implement the lightning__RecordAction interface. This interface allows the LWC to be used as an action override.

Here’s an example demonstrating how to create a custom LWC component to override the “New” action for an object.

Steps:

1. Create an LWC Component with the necessary UI and logic.
2. Implement the lightning__RecordAction Interface to make the component available for action overrides.

Example: Overriding the “New” Action

1. LWC Component JavaScript (newRecordOverride.js)

import { LightningElement, api, wire } from 'lwc';
import { getRecordCreateDefaults, generateRecordInputForCreate, createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class NewRecordOverride extends LightningElement {
    @api objectApiName; // Automatically injected by lightning__RecordAction
    recordInput;

    @wire(getRecordCreateDefaults, { objectApiName: '$objectApiName' })
    createDefaults({ data, error }) {
        if (data) {
            this.recordInput = generateRecordInputForCreate(data.record);
        } else if (error) {
            console.error('Error fetching create defaults:', error);
        }
    }

    handleSave() {
        createRecord(this.recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record created successfully',
                        variant: 'success'
                    })
                );
                // Navigate to the newly created record or close the modal if needed
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }

    handleCancel() {
        // Close modal or handle cancel action
    }
}

2. LWC Component HTML (newRecordOverride.html)

<template>
    <lightning-card title="New Record" icon-name="standard:new">
        <div class="slds-p-around_medium">
            <!-- Custom fields and inputs for record creation -->
            <lightning-button label="Save" onclick={handleSave} variant="brand"></lightning-button>
            <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
        </div>
    </lightning-card>
</template>

3. Configuration File (newRecordOverride.js-meta.xml)

In the configuration file, specify the lightning__RecordAction interface to make this component available for action overrides. Define the action scope to specify the actions it can override.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="newRecordOverride">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <action>New</action> <!-- Specify the action you want to override (e.g., New, Edit) -->
            <objects>Account</objects> <!-- Replace 'Account' with the appropriate object API name -->
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Explanation:

• Interface: The lightning__RecordAction interface makes the LWC available as an action override.
• Action Scope: The <action>New</action> tag specifies that this component will override the “New” action.
• Object Scope: The <objects>Account</objects> tag limits the component’s usage to the Account object. Change this to the desired object.

Usage

Once deployed, you can assign this component as an override for the “New” action on the specified object (like Account) via Salesforce Setup:

1. Go to Object Manager for the relevant object.
2. Under Buttons, Links, and Actions, select New.
3. Set this LWC component as the override for the “New” action.

This component will now be invoked whenever the “New” action is triggered for the specified object.

50 LWC Lightning Web Component Interview Questions Part 1

40. Which interface should you use if you want your component to be used as a tab?

force:appHottable
<aura:component implements="force:appHottable,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" >
   Custom TAB LWC
</aura:component>

How to extend one Aura Component to another?

1. To extend the component we need to add 2 attributes to component which are extensible and abstract below is the example
2. <aura:component extensible=”true” abstract=”true” >
3. Code for Parent Component

<aura:component extensible="true" abstract="true" controller="ObjectPanelController">

<aura:attribute name="sObjectType" type="String" required="true" />

<aura:attribute name="maxRows" type="Integer" default="20" />

<aura:attribute name="fields" type="String" />

<aura:attribute name="records" type="Object[]" />

<aura:attribute name="sObjectInfo" type="Object" />

<h2>{!v.sObjectInfo.Label}</h2>

<div>{!v.body}</div>

</aura:component>

Code for child Component

<aura:component extends="c:objectPanel">

   <aura:attribute name="showAccountWarning" type="Boolean" default="true" />

   <aura:set attribute="sObjectType" value="Account" />

   <aura:set attribute="fields" value="AccountNumber,Website" />

   <aura:iteration items="{!v.records}" var="rec">

       <div>

           <a onclick="{!c.deleteRecord}">Del</a> |

           <a onclick="{!c.navigateToRecord}"><ui:outputText value="{!rec.Name}"/></a>

           <ui:outputText value="{!rec.AccountNumber}" />

           <ui:outputURL value="{!rec.Website}" />

           <aura:renderIf isTrue="{!and(v.showAccountWarning, rec.Is_Red__c)}">

               <span class="warn">WARNING: Red Account</span>

           </aura:renderIf>

       </div>

   </aura:iteration>

</aura:component>

50 LWC Lightning Web Component Interview Questions Part 1

40. What is Lightning Out?

Lightning out is used to use our aura or LWC inside a vf page or outside of salesforce org.

Lightning out is used in lightning aura application.

//Component Code
<!--SampleComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" 
access="global">
   <!--Declare Attributes-->
   <aura:attribute name="vfMsgMethod" 
   type="object" description="this attribute is for visualforce page javascript method"/>
</aura:component>

See also: Salesforce Email Studio in Marketing Cloud

41. What are the phases in component events propagation?

In Salesforce LWC, component events propagate through two main phases: the Capturing Phase and the Bubbling Phase.

1. Capturing Phase: In this phase, the event begins at the root of the DOM tree and travels downwards to the target element. Event listeners set to capture can intercept the event before it reaches the target component.
2. Bubbling Phase: After reaching the target, the event bubbles back up through the DOM hierarchy, from the target element to the root. Event listeners set for bubbling can handle the event as it moves upward.

These phases give developers control over when to respond to events, either before or after they reach the target, enabling more flexible event management within complex component hierarchies.

More info here

Check out these top Salesforce interview questions and answers for extensive knowledge and informative details about Salesforce Admin, Developer, Integration, and LWC modules.

42. What is Lightning:isUrlAddressable interface?

To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressable interface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component.

See also: Reports and Dashboards

43. How can we conditionally display content in the lightning component?

Using aura:if

<aura:component>
    <aura:if isTrue="{!v.truthy}">
    True
    <aura:set attribute="else">
      False
    </aura:set>
  </aura:if> 
</aura:component>

44. What are List of Global value providers in lightning?

• $globalID
• $Browser
• $Label
• $Locale
• $Resource

See also: Journey Builder in Salesforce Marketing Cloud

45. What is the use of $A.enueueAction?

Ans: $A.enueueAction is used to place the apex call in a queue from Lightning Aura Component so that it can make the call to Apex Class and return the data from salesforce method.

See also: Master-detail relationships in Salesforce

46. How to use an external library in Aura Component?

To use an external library in an Aura component, include the library in a static resource, and then load it using the <ltng:require> tag within your component.

<aura:component>
    <ltng:require scripts="{!$Resource.yourLibrary}" />
    <!-- Your component content -->
</aura:component>

See also: Database methods in Salesforce Apex

47. How to make a method cacheable from JavaScript Side?

var action = component.get("c.getListOfItem");
   action.setStorable();
   action.setCallback(this, function(response) {
   // handle response
};
$A.enqueueAction(action);

See also: DML Statements in Salesforce Apex

48. What is the use of aura:method in lightning aura component?

Aura:method is used to call the child method from the parent aura component
Declaring the aura method in child component with attribute
Getting the variables inside child javascript method
Call method from parent component
JavaScript of Parent Component

//Declaring the aura method in child component with attribute
<aura:method name="sampleMethod" action="{!c.doAction}" description="Sample method with parameters">
   <aura:attribute name="param1" type="String" default="parameter 1"/>
   <aura:attribute name="param2" type="Object" />
</aura:method>
//Getting the variables inside child javascript method
({
   doAction : function(cmp, event) {
       var params = event.getParam('arguments');
       if (params) {
           var param1 = params.param1;
       }
   }

//Call method from parent component
<!--Parent cmp-->
<aura:component> 
   <div class="slds-m-around_xx-large">
       <!-- Add Child Component -->
       <c:ChildComponent aura:id="childCmp"/>
       <!-- On button click child aura:method will be called-->
       <lightning:button variant="brand" label="Call Child" onclick="{!c.callAuraMethod}" />
   </div>
</aura:component>

49. What is $globalId in LWC?

In Lightning Web Components (LWC), there is no direct equivalent to Aura’s $globalId. The $globalId in Aura provides a unique identifier for the component instance within the framework.

In LWC, each component is automatically given a unique identifier by the framework, but this is handled internally and is not exposed directly to the developer. If you need a unique identifier for an LWC component, you can create one manually using JavaScript, such as using a UUID library or Date.now() for generating unique IDs.

See also: Loops in Salesforce Apex

50. What is the difference between Event Capture Vs Event Bubble?

Event Capture (Capturing Phase):

• During the capturing phase, the event starts from the top of the DOM tree and propagates down to the target element.
• You can listen for events in the capturing phase by setting the capture option to true in the addEventListener method.

this.template.addEventListener('eventname', this.handleEvent, { capture: true });

Event Bubble (Bubbling Phase):

• During the bubbling phase, the event starts from the target element and propagates up through the DOM tree.
• By default, event listeners are set to listen in the bubbling phase unless specified otherwise.

this.template.addEventListener('eventname', this.handleEvent);

See also: Strings in Salesforce Apex

See also: Accenture Salesforce Marketing Cloud interview Questions