Lightning Web Components – LWC Basics Questions

LWC Basics - Q&A

1. Q1. What is LWC and how does it differ from Aura components?
   Ans: Lightning Web Components (LWC) is: - A modern JavaScript framework built on Web Standards - Faster and lighter than Aura (uses native browser features) - Uses real shadow DOM (vs synthetic shadow in Aura) - Key differences: * Better performance (2-3x faster) * Standard JavaScript (no proprietary markup) * Composition model instead of inheritance
2. Q2. Explain the basic structure of an LWC component.
   Ans: Core files:

   myComponent/
     ├── myComponent.html      // Template
     ├── myComponent.js       // Controller
     ├── myComponent.css      // Styling
     └── myComponent.js-meta.xml  // Configuration

   Example HTML:

3. Q3. What are decorators in LWC and name the core ones?
   Ans: Decorators are special functions that modify class properties/methods: - @api: Exposes public properties/methods - @track: Tracks private reactive properties (now implicit) - @wire: Reads Salesforce data (imperative/reactive) Example:

   import { api, track, wire } from 'lwc';
   export default class MyComponent extends LightningElement {
     @api recordId;
     @track privateData;
     @wire(getRecord, { recordId: '$recordId' }) 
     wiredRecord;
   }

4. Q4. How does reactivity work in LWC?
   Ans: Data binding principles: - Primitive properties are reactive by default - Object/array properties need immutable updates:

   // Wrong (won't trigger reactivity)
   this.someObject.property = newValue;
   
   // Correct
   this.someObject = {...this.someObject, property: newValue};

   - Use @track for complex nested objects (if needed)
5. Q5. What are the component lifecycle hooks in LWC?
   Ans: Key lifecycle methods: - constructor(): Initial setup (avoid DOM operations) - connectedCallback(): Component inserted in DOM - renderedCallback(): After every render (careful with loops) - disconnectedCallback(): Cleanup when removed Execution order: constructor → connected → rendered → disconnected
6. Q6. How do you conditionally render elements in LWC?
   Ans: Conditional rendering patterns: - if:true directive:
   - if:else:

7. Q7. How do you loop through data in LWC templates?
   Ans: Iteration with for:each:
   Requirements: - Unique key attribute - Array must be iterable
8. Q8. How do you handle user interactions in LWC?
   Ans: Event handling patterns: - DOM events:

   Click
   
   handleClick(event) {
     console.log('Clicked', event.target);
   }

   - Custom events (child-to-parent communication):

   this.dispatchEvent(new CustomEvent('notify', {
     detail: { message: 'Hello' }
   }));

9. Q9. What are slots in LWC and how are they used?
   Ans: Slot patterns: - Default slot:

   
   
     
   Default content
   
   
   
   
     
   

   - Named slots:

10. Q10. How do you style components in LWC?
    Ans: Styling approaches: - Scoped CSS (automatic with .css files) - CSS variables:

    /* Component CSS */
    .container {
      background: var(--lwc-brandPrimary);
    }

    - Global styles (via static resource) - Style hooks (for parent customization)
11. Q11. What are the restrictions of LWC shadow DOM?
    Ans: Shadow DOM limitations: - Styles are scoped to component - Can't directly style parent/child components - Global styles don't penetrate shadow boundary - Workarounds: * CSS custom properties * Styled slots * Light DOM (use lwc:render-mode="light")
12. Q12. How do you debug LWC components?
    Ans: Debugging techniques: - Chrome DevTools (Components panel) - console.log() in lifecycle methods - this.template.querySelector() inspection - Enable debug mode (Settings → Debug Mode) - Use wire adapters' error property
13. Q13. How do you make components configurable?
    Ans: Configuration patterns: - Public properties (@api):

    @api fontSize = 'medium';

    - Design attributes (.js-meta.xml):
    - Custom metadata/config objects
14. Q14. What are the best practices for LWC performance?
    Ans: Performance tips: - Use lightning-datatable for large datasets - Debounce rapid events (search input) - Lazy load non-critical components - Avoid complex logic in renderedCallback - Use @wire for data when possible
15. Q15. How do you test LWC components?
    Ans: Testing strategies: - Jest unit tests (for JS logic) - Test DOM with createElement():

    const element = createElement('c-my-component', {
      is: MyComponent
    });
    element.recordId = '123';
    document.body.appendChild(element);

    - Verify @api properties and events - Test accessibility (a11y)
16. Q16. How do you handle navigation in LWC?
    Ans: Navigation patterns: - Use lightning/navigation service:

    import { NavigationMixin } from 'lightning/navigation';
    
    export default class MyComponent extends NavigationMixin(LightningElement) {
      navigateToRecord() {
        this[NavigationMixin.Navigate]({
          type: 'standard__recordPage',
          attributes: {
            recordId: this.recordId,
            actionName: 'view'
          }
        });
      }
    }

17. Q17. How do you implement error boundaries in LWC?
    Ans: Error handling pattern:

    export default class ErrorBoundary extends LightningElement {
      error;
      errorCallback(error, stack) {
        this.error = error;
        // Log to error service
      }
    
      render() {
        return this.error
          ? 
          : ;
      }
    }