Salesforce-Component-Standards

# Salesforce Component Quality Standards

Apply these checks to every LWC, Aura component, and Visualforce page you write or review.

Section 1 — LWC Quality Standards

1.1 Data Access Pattern Selection

Choose the right data access pattern before writing JavaScript controller code:

| Use case | Pattern | Why |

|---|---|---|

| Read a single record reactively (follows navigation) | `@wire(getRecord, { recordId, fields })` | Lightning Data Service — cached, reactive |

| Standard CRUD form for a single object | `<lightning-record-form>` or `<lightning-record-edit-form>` | Built-in FLS, CRUD, and accessibility |

| Complex server query or filtered list | `@wire(apexMethodName, { param })` on a `cacheable=true` method | Allows caching; wire re-fires on param change |

| User-triggered action, DML, or non-cacheable server call | Imperative `apexMethodName(params).then(...).catch(...)` | Required for DML — wired methods cannot be `@AuraEnabled` without `cacheable=true` |

| Cross-component communication (no shared parent) | Lightning Message Service (LMS) | Decoupled, works across DOM boundaries |

| Multi-object graph relationships | GraphQL `@wire(gql, { query, variables })` | Single round-trip for complex related data |

1.2 Security Rules

| Rule | Enforcement |

|---|---|

| No raw user data in `innerHTML` | Use `{expression}` binding in the template — the framework auto-escapes. Never use `this.template.querySelector('.el').innerHTML = userValue` |

| Apex `@AuraEnabled` methods enforce CRUD/FLS | Use `WITH USER_MODE` in SOQL or explicit `Schema.sObjectType` checks |

| No hardcoded org-specific IDs in component JavaScript | Query or pass as a prop — never embed record IDs in source |

| `@api` properties from parent: validate before use | A parent can pass anything — validate type and range before using as a query parameter |

1.3 SLDS 2 and Styling Standards

- **Never** hardcode colours: `color: #FF3366` → use `color: var(--slds-c-button-brand-color-background)` or a semantic SLDS token.

- **Never** override SLDS classes with `!important` — compose with custom CSS properties.

- Use `<lightning-*>` base components wherever they exist: `lightning-button`, `lightning-input`, `lightning-datatable`, `lightning-card`, etc.

- Base components include built-in SLDS 2, dark mode, and accessibility — avoid reimplementing their behaviour.

- If using custom CSS, test in both **light mode** and **dark mode** before declaring done.

1.4 Accessibility Requirements (WCAG 2.1 AA)

Every LWC component must pass all of these before it is considered done:

- [ ] All form inputs have `<label>` or `aria-label` — never use placeholder as the only label

- [ ] All icon-only buttons have `alternative-text` or `aria-label` describing the action

- [ ] All interactive elements are reachable and operable by keyboard (Tab, Enter, Space, Escape)

- [ ] Colour is not the only means of conveying status — pair with text, icon, or `aria-*` attributes

- [ ] Error messages are associated with their input via `aria-describedby`

- [ ] Focus management is correct in modals — focus moves into the modal on open and back on close

1.5 Component Communication Rules

| Direction | Mechanism |

|---|---|

| Parent → Child | `@api` property or calling a `@api` method |

| Child → Parent | `CustomEvent` — `this.dispatchEvent(new CustomEvent('eventname', { detail: data }))` |

| Sibling / unrelated components | Lightning Message Service (LMS) |

| Never use | `document.querySelector`, `window.*`, or Pub/Sub libraries |

For Flow screen components:

- Events that need to reach the Flow runtime must set `bubbles: true` and `composed: true`.

- Expose `@api value` for two-way binding with the Flow variable.

1.6 JavaScript Performance Rules

- **No side effects in `connectedCallback`**: it runs on every DOM attach — avoid DML, heavy computation, or rendering state mutations here.

- **Guard `renderedCallback`**: always use a boolean guard to prevent infinite render lo