Lightning Web Components 2025 Features

🚨 CRITICAL GUIDELINES

Windows File Path Requirements

MANDATORY: Always Use Backslashes on Windows for File Paths

When using Edit or Write tools on Windows, you MUST use backslashes (\) in file paths, NOT forward slashes (/).

Examples:

• ❌ WRONG: D:/​repos/​project/​file.tsx
• ✅ CORRECT: D:\repos\project\file.tsx

This applies to:

• Edit tool file_path parameter
• Write tool file_path parameter
• All file operations on Windows systems

Documentation Guidelines

NEVER create new documentation files unless explicitly requested by the user.

• Priority: Update existing README.md files rather than creating new documentation
• Repository cleanliness: Keep repository root clean - only README.md unless user requests otherwise
• Style: Documentation should be concise, direct, and professional - avoid AI-generated tone
• User preference: Only create additional .md files when user specifically asks for documentation

---

Lightning Web Components 2025 Features

lightning/​graphql Module (Winter '26)

New module replaces deprecated lightning/​uiGraphQLApi:

Migration

// ❌ Old (deprecated)
import { gql, graphql } from 'lightning/​uiGraphQLApi';

// ✅ New (Winter '26)
import { gql, graphql } from 'lightning/​graphql';

export default class MyComponent extends LightningElement {
  @wire(graphql, {
    query: gql`
      query getAccount($id: ID!) {
        uiapi {
          query {
            Account(where: { Id: { eq: $id } }) {
              edges {
                node {
                  Id
                  Name
                  Industry
                }
              }
            }
          }
        }
      }
    `,
    variables: '$variables'
  })
  results;

  get variables() {
    return { id: this.recordId };
  }
}

Benefits

• Improved performance
• Better error handling
• Enhanced type safety
• Future-proof API

Local Development (sf lightning dev component)

Run LWC components locally without deploying:

# Start local dev server
sf lightning dev component

# Opens browser at http://localhost:3333
# Live reload on file changes
# No deployment needed
# Faster development cycle

# Specify component
sf lightning dev component -n myComponent

# Specify target org
sf lightning dev component -o [email protected]

Benefits:

• Instant feedback (no deployment wait)
• Debug in real browser DevTools
• Hot module replacement
• Work offline

Platform Module Access in Component Preview

Access platform modules in single component preview:

// Works in local preview now
import { getRecord } from 'lightning/​uiRecordApi';
import { ShowToastEvent } from 'lightning/​platformShowToastEvent';
import { NavigationMixin } from 'lightning/​navigation';

// Previously required full org deployment
// Now works in sf lightning dev component

Agentforce Targets (Winter '26)

New LWC targets for AI agents:

<!-- meta.xml -->
<targets>
  <!-- Input component for Agentforce -->
  <target>lightning__AgentforceInput</​target>

  <!-- Output component for Agentforce -->
  <target>lightning__AgentforceOutput</​target>
</​targets>

// agentInputComponent.js
import { LightningElement, api } from 'lwc';

export default class AgentInputComponent extends LightningElement {
  @api agentContext;  // Provided by Agentforce

  handleSubmit() {
    const userInput = this.template.querySelector('input').value;
    // Send to Agentforce
    this.dispatchEvent(new CustomEvent('agentinput', {
      detail: { input: userInput }
    }));
  }
}

Lightning Out 2.0 (GA Winter '26)

Re-imagined embedding with web components:

Traditional Lightning Out (Legacy)

<script src="https://MyDomain.lightning.force.com/​lightning/​lightning.out.js"></​script>
<script>
  $Lightning.use("c:myApp", function() {
    $Lightning.createComponent("c:myComponent",
      { recordId: "001..." },
      "lightningContainer",
      function(cmp) { /​* callback */ }
    );
  });
</​script>
<div id="lightningContainer"></​div>

Lightning Out 2.0 (Modern)

<!-- Standards-based web components -->
<script src="https://MyDomain.lightning.force.com/​c/​myComponent.js" type="module"></​script>

<!-- Use as web component -->
<c-my-component record-id="001..." ></​c-my-component>

<!-- No Aura dependency -->
<!-- Powered by LWR (Lightning Web Runtime) -->
<!-- Lighter and faster -->

Benefits:

• 50-70% smaller bundle size
• Faster load times
• Standards-based (no proprietary framework)
• Better browser compatibility
• Simplified integration

SLDS 2.0 with Dark Mode (GA Winter '26)

Salesforce Lightning Design System 2.0:

/​* Dark mode support in custom themes */
:host([data-theme="dark"]) {
  --lwc-colorBackground: #16325c;
  --lwc-colorTextPrimary: #ffffff;
  --lwc-brandPrimary: #1589ee;
}

/​* Light mode */
:host([data-theme="light"]) {
  --lwc-colorBackground: #ffffff;
  --lwc-colorTextPrimary: #181818;
  --lwc-brandPrimary: #0176d3;
}

// Toggle dark mode
export default class ThemeToggle extends LightningElement {
  handleThemeChange(event) {
    const theme = event.target.checked ? 'dark' : 'light';
    this.template.host.setAttribute('data-theme', theme);
  }
}

SLDS Linter with Fix Option

# Install SLDS linter
npm install -D @salesforce-ux/​slds-linter

# Lint with auto-fix
npx slds-linter --fix src/

# CI/​CD integration
npx slds-linter src/ --format json > slds-report.json

Unified Testing APIs (Winter '26)

Test Discovery and Test Runner APIs unify Apex and Flow testing:

// Discover all tests
Test.DiscoveryResult discovery = Test.discoverTests();

// Get Apex tests
List<Test.ApexTestInfo> apexTests = discovery.getApexTests();

// Get Flow tests
List<Test.FlowTestInfo> flowTests = discovery.getFlowTests();

// Run all tests from single location
Test.RunResult result = Test.runTests(discovery);

// Check results
System.debug('Apex passed: ' + result.getApexTestsPassed());
System.debug('Flow passed: ' + result.getFlowTestsPassed());

Benefits:

• Unified test execution
• Single test report
• Simplified CI/​CD
• Better test orchestration

Lightning Web Security Enhancements

New security protections with API distortions:

// Additional secure protections automatically applied
export default class SecureComponent extends LightningElement {
  connectedCallback() {
    // Web APIs now include security distortions
    // ESLint rules validate distortion compliance

    // Example: Secure window access
    const secureWindow = window;  // LWS-secured reference
  }
}

ESLint Rules for Security

// .eslintrc.json
{
  "extends": ["@salesforce/​eslint-config-lwc/​recommended"],
  "rules": {
    "@lwc/​lwc/​no-inner-html": "error",
    "@lwc/​lwc/​no-document-query": "error",
    "@salesforce/​lwc-security/​no-unsafe-references": "error"
  }
}

Practical Migration Examples

GraphQL Module Update

// Before (Winter '25)
import { gql, graphql } from 'lightning/​uiGraphQLApi';

@wire(graphql, { query: gql`...` })
results;

// After (Winter '26)
import { gql, graphql } from 'lightning/​graphql';

@wire(graphql, { query: gql`...` })
results;

Local Development Workflow

# Old workflow (deploy every change)
sf project deploy start
# Wait 30-60 seconds
# Test in org
# Repeat...

# New workflow (instant feedback)
sf lightning dev component
# Changes reflect immediately
# No deployment
# Test in local browser
# Deploy only when ready

Embedding with Lightning Out 2.0

<!-- Old (Lightning Out 1.0) -->
<script src="/​lightning/​lightning.out.js"></​script>
<script>
  $Lightning.use("c:app", function() {
    $Lightning.createComponent("c:comp", {}, "div", callback);
  });
</​script>

<!-- New (Lightning Out 2.0) -->
<script src="/​c/​comp.js" type="module"></​script>
<c-comp></​c-comp>

Resources

• Lightning Web Components Dev Guide
• Winter '26 Release Notes
• SLDS 2.0
• Lightning Out 2.0