Mastering Lightning Web Components (LWC) in Technical Interviews
Lightning Web Components (LWC) are built using standard HTML and modern JavaScript (ES6+). In senior developer and architect interviews, candidates are tested on reactivity, wire adapters, Shadow DOM encapsulation, custom events, and performance optimization.
Q1: Explain LWC Reactivity and the difference between @track, @api, and standard properties.
Answer: In modern LWC, all primitive properties are reactive by default. If a property’s value changes, the component rerenders. However, when working with complex objects or arrays, @track is required to mutate nested fields reactively.
// LWC JavaScript Reactive Pattern
import { LightningElement, api, track, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';
export default class AccountDashboard extends LightningElement {
@api recordId; // Public reactive property passed from parent/record page
@track filterCriteria = { status: 'Active', limit: 10 }; // Tracked nested object
@wire(getAccountList, { status: '$filterCriteria.status' })
accounts;
handleFilterChange(event) {
// Mutating nested property triggers reactivity because of @track
this.filterCriteria.status = event.target.value;
}
}Q2: How does Shadow DOM encapsulation work in LWC?
LWC uses a Synthetic Shadow DOM to enforce scoping for CSS styles and DOM elements. Styles defined in a component’s CSS file do not leak into child or parent components. To style child elements or custom slots, developers use CSS custom properties or global SLDS utility classes.