Q: What is a Lightning Web Component (LWC)?
A: LWC is a framework for building user interfaces in Salesforce using modern web standards like HTML, JavaScript, and CSS.
Q: How does LWC differ from Aura components?
A: LWC uses native web standards and provides better performance, simpler syntax, and improved developer productivity compared to Aura components.
Q: What are the key features of LWC?
A: Key features include shadow DOM, standard DOM events, modular JavaScript, reactive properties, and templates.
Q: What is the file structure of an LWC component?
A: An LWC component typically includes a JavaScript file (.js), an HTML template (.html), a CSS file (.css), and a metadata configuration file (.xml).
Q: How do you create an LWC component?
A: You can create an LWC component using the Salesforce CLI with the command sfdx force:lightning:component:create.
Q: What is the purpose of the @track decorator?
A: The @track decorator makes a property reactive, allowing the component to rerender when the property value changes.
Q: How do you use the @api decorator?
A: The @api decorator is used to expose a property or method to the parent component.
Q: What is the wire service in LWC?
A: The wire service is used to fetch data from Salesforce declaratively, without writing imperative code.
Q: How do you handle events in LWC?
A: Events in LWC are handled using standard DOM event handling mechanisms like addEventListener and custom events with dispatchEvent.
Q: What is Shadow DOM, and how does it relate to LWC?
A: Shadow DOM is a web standard for encapsulating the internal structure of a component. LWC uses Shadow DOM to isolate styles and markup.
Q: How do you style an LWC component?
A: You can style an LWC component using standard CSS in the component’s CSS file, and you can also use SLDS (Salesforce Lightning Design System) classes.
Q: What is SLDS?
A: SLDS stands for Salesforce Lightning Design System, a CSS framework for building Salesforce-styled applications.
Q: How do you import a static resource in LWC?
A: You import a static resource using the @salesforce/resourceUrl scoped module.
Q: How do you navigate between pages in an LWC component?
A: You can navigate between pages using the navigationMixin from lightning/navigation.
Q: What is a Lightning Message Service (LMS)?
A: LMS is a service that allows communication between LWC components, Aura components, and Visualforce pages within a single Lightning page.
Q: How do you use Lightning Data Service (LDS) in LWC?
A: You use LDS by importing and using the lightning/ui*Api modules to perform CRUD operations.
Q: How do you deploy an LWC component to Salesforce?
A: You deploy an LWC component using the Salesforce CLI with commands like sfdx force:source:push or sfdx force:source:deploy.
Q: What are reactive properties in LWC?
A: Reactive properties are properties that, when changed, cause the component to rerender automatically.
Q: How do you pass data between LWC components?
A: You pass data between LWC components using properties, events, or pub-sub model for sibling components.
Q: What is the connectedCallback lifecycle hook?
A: The connectedCallback lifecycle hook is called when the component is inserted into the DOM.
Q: What is the disconnectedCallback lifecycle hook?
A: The disconnectedCallback lifecycle hook is called when the component is removed from the DOM.
Q: How do you call an Apex method from an LWC component?
A: You call an Apex method using the @wire service for caching or @api decorator for imperative calls.
Q: How do you handle errors in LWC?
A: Errors in LWC are handled using try-catch blocks for imperative Apex calls and error handling mechanisms for wired methods.
Q: What is the purpose of the renderedCallback lifecycle hook?
A: The renderedCallback lifecycle hook is called after every render of the component, useful for post-rendering logic.
Q: How do you use template loops in LWC?
A: You use template loops in LWC with the for:each directive in the HTML template.
Q: How do you conditionally render elements in LWC?
A: You conditionally render elements using the if:true and if:false directives in the HTML template.
Q: How do you import a module in LWC?
A: You import a module in LWC using standard ES6 import syntax, e.g., import { LightningElement, api } from 'lwc';.
Q: What is the lightning-record-form component?
A: The lightning-record-form component is a built-in LWC component that provides a form for creating, viewing, and editing a record.
Q: How do you fetch current user details in LWC?
A: You fetch current user details in LWC using the @salesforce/user scoped modules.
Q: How do you add a custom icon to an LWC component?
A: You add a custom icon by importing the static resource and using it in your component’s HTML template.