Lwc Development

Lightning Web Components Development Guide

Core Principle: Always Use Lightning Namespace Components

CRITICAL: When building Lightning Web Components for Salesforce, ALWAYS use lightning-* namespace components instead of generic HTML elements. This ensures proper Salesforce integration, styling, accessibility, and platform compatibility.

Component Selection Guide

User Input Components

| Use This | NOT This | When | |----------|----------|------| | ` | | Text fields, numbers, dates, checkboxes, toggles | | | | Multi-line text input | | | | Dropdown selections with search | | | | Moving items between lists | | | Multiple fields | Address entry with validation | | | Map/location inputs | Geographic location selection | | | | Numeric range selection | | | | Radio button groups | | | ` | Checkbox groups |

Buttons & Actions

| Use This | NOT This | When | |----------|----------|------| | ` | | Standard actions, form submissions | | | with icon | Icon-only buttons | | | or custom menu | Dropdown action menus | | | Multiple ` | Related button groups |

Layout & Structure

| Use This | NOT This | When | |----------|----------|------| | ` | with custom styling | Contained content sections | | | with flexbox | Responsive grid layouts | | | | Items within lightning-layout | | | Custom collapsible | Expandable/collapsible sections | | / | Custom tab UI | Tabbed interfaces | | | Custom slideshow | Image carousels | | | ` | Compact record display |

Data Display

| Use This | NOT This | When | |----------|----------|------| | ` | | Tabular data with sorting/filtering | | | Nested | Hierarchical data | | | Complex nested tables | Tree structure with columns | | | Manual formatting | Display formatted values (date, time, currency, etc.) | | | or | Display Salesforce field values | | | for user photos | User profile pictures | | | with styling | Status indicators | | | SVG or font icons | SLDS icons | | | Custom progress indicators | Progress visualization | | ` | Custom step indicators | Multi-step processes |

Record Interaction

| Use This | NOT This | When | |----------|----------|------| | ` | Custom form with fields | Quick record create/edit/view forms | | | Manual field inputs | Custom record editing with validation | | | Manual field display | Display record fields | | ` | Manual field rendering | Display fields in view forms |

Navigation & Feedback

| Use This | NOT This | When | |----------|----------|------| | ` | Custom loading animation | Loading states | | | with close button | Removable tags/labels | | | Custom tooltip | Help text/tooltips | | / ` | Custom breadcrumb trail | Navigation hierarchy |

Essential LWC Patterns

1. Component Structure

// componentName.js
import { LightningElement, api, track, wire } from 'lwc';

export default class ComponentName extends LightningElement {
    @api recordId;          // Public property
    @track privateData;     // Reactive private property
    
    // Use @wire for reactive data
    @wire(wireAdapter, { params })
    wiredProperty;
}

2. Lightning Input Example

CORRECT:

INCORRECT (DO NOT USE):

    
    
    Submit

3. Lightning Datatable Example

// JavaScript
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

const COLUMNS = [
    { label: 'Account Name', fieldName: 'Name', type: 'text' },
    { label: 'Industry', fieldName: 'Industry', type: 'text' },
    { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency' }
];

export default class AccountList extends LightningElement {
    columns = COLUMNS;
    @wire(getAccounts) accounts;
}

4. Record Forms

Quick Record Form (minimal code):

Custom Record Edit Form (more control):

Styling with SLDS

Use Salesforce Lightning Design System (SLDS) utility classes instead of custom CSS:

Common Anti-Patterns to Avoid

❌ DON'T: Use Ternary Operators in HTML Templates

CRITICAL: LWC templates do NOT support ternary operators or complex JavaScript expressions in HTML.

WRONG:

{isActive ? 'Active' : 'Inactive'}

CORRECT:

    Active

    Inactive

// JavaScript - Use getters for computed values
export default class MyComponent extends LightningElement {
    isActive = true;
    isRequired = true;
    status = 'complete';
    
    get fieldLabel() {
        return this.isRequired ? 'Required Field' : 'Optional Field';
    }
    
    get statusClass() {
        return this.status === 'complete' ? 'green' : 'red';
    }
}

❌ DON'T: Use Generic HTML Elements

Click
Item

✅ DO: Use Lightning Components

❌ DON'T: Manual Form Validation

// WRONG - manual validation
if (!this.template.querySelector('input').value) {
    alert('Required field');
}

✅ DO: Use Built-in Validation

// CORRECT - use reportValidity()
const allValid = [...this.template.querySelectorAll('lightning-input')]
    .reduce((validSoFar, inputCmp) => {
        inputCmp.reportValidity();
        return validSoFar && inputCmp.checkValidity();
    }, true);

❌ DON'T: Direct DOM Manipulation

// WRONG
this.template.querySelector('div').innerHTML = 'Text';

✅ DO: Use Reactive Properties

// CORRECT
@track displayText = 'Text';

Component Communication

Parent to Child

// Parent passes data via public property

// Child receives via @api
export default class ChildComponent extends LightningElement {
    @api recordId;
}

Child to Parent

// Child dispatches event
this.dispatchEvent(new CustomEvent('select', {
    detail: { recordId: this.recordId }
}));

// Parent handles event

Lightning Data Service (LDS)

Use LDS for automatic data caching and synchronization:

import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Account.Name', 'Account.Industry'];

export default class AccountDetail extends LightningElement {
    @api recordId;
    
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    account;
}

Navigation

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'
            }
        });
    }
}

Key Reminders

1. ALWAYS use lightning-* components - Never use generic HTML form elements
2. Use SLDS classes for styling - Avoid custom CSS when possible
3. Leverage LDS for data operations - Built-in caching and sync
4. Use @wire for reactive data - Automatic re-rendering
5. Report validity - Use built-in validation methods
6. Import only what you need - Keep bundle size small
7. Follow naming conventions - camelCase for properties, kebab-case for HTML attributes
8. Test with Salesforce data - Component behavior may differ with real records

File Structure

lwcComponentName/
├── lwcComponentName.html          # Template
├── lwcComponentName.js            # JavaScript controller
├── lwcComponentName.js-meta.xml   # Configuration
└── lwcComponentName.css           # Styles (optional)

Metadata Configuration (.js-meta.xml)

    60.0
    true
    
        lightning__AppPage
        lightning__RecordPage
        lightning__HomePage
    
    
        
            
                Account
                Contact
            
        
    

Quick Reference: Most Common Components

Forms & Input:

• lightning-input - Text, email, number, date, checkbox, toggle
• lightning-textarea - Multi-line text
• lightning-combobox - Searchable dropdown
• lightning-button - Actions and submissions

Layout:

• lightning-card - Content container
• lightning-layout + lightning-layout-item - Responsive grid
• lightning-accordion - Collapsible sections

Data Display:

• lightning-datatable - Tables with sorting/selection
• lightning-formatted-* - Display formatted values
• lightning-icon - SLDS icons

Record Operations:

• lightning-record-form - Quick create/edit/view
• lightning-record-edit-form - Custom edit forms
• lightning-record-view-form - Display records

Feedback:

• lightning-spinner - Loading indicator
• lightning-messages - Form validation messages

Remember: When in doubt, search for "lightning-" + functionality in the Salesforce Component Library. The lightning namespace has a component for almost everything!

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: david-sfdev
• Source: david-sfdev/claude-sf-skills
• License: MIT

Install and usage instructions live in the source repository linked above.