Lightning Web Components

https://lwc.dev/guide
Admin
Lightning Web Components is a lightweight UI framework built on modern web standards for creating...
Tokens:259,498
Snippets:3,201
Trust Score:8.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and run LWR project

Source: https://lwc.dev/guide/install

Navigate to your project directory, install dependencies, and start the development server.

```bash
cd YourProjectName
npm install
npm run start
```

--------------------------------

### Initialize and start an LWR project

Source: https://lwc.dev

Commands to initialize a new project, install dependencies, and start the development server.

```bash
$ npm init lwr
$ npm install
$ npm run start
```

--------------------------------

### Initialize LWC project with LWR

Source: https://lwc.dev/guide/install

Run this command to start the interactive setup for a new Lightning Web Components project using Lightning Web Runtime.

```bash
npm init lwr@latest
```

--------------------------------

### Install Jest and LWC Jest packages

Source: https://lwc.dev/guide/test

Install Jest and the LWC Jest packages. The first command installs Jest, the second installs the preset package, and the third installs the individual packages if the preset is not used.

```bash
npm install jest --save-dev

```

```bash
npm install @lwc/jest-preset --save-dev

```

```bash
npm install @lwc/jest-transformer --save-dev
npm install @lwc/jest-resolver --save-dev
npm install @lwc/jest-serializer --save-dev

```

--------------------------------

### Slot Forwarding Setup

Source: https://lwc.dev/guide/light_dom

Initial setup for passing content from a container into an outer component.

```html
<!-- container.html -->
<template>
  <c-outer>
    <span slot="namedSlot">Named slot content</span>
  </c-outer>
</template>
```

--------------------------------

### Comprehensive @salesforce module fix examples

Source: https://lwc.dev/guide/error_codes/lwc1704

Examples of correctly formatted imports for various @salesforce modules.

```javascript
// Add resource after module prefix
import myLabel from "@salesforce/label/c.MyLabel";
import country from "@salesforce/i18n/country";
import ACCOUNT_OBJECT from "@salesforce/schema/Account";
import getAccounts from "@salesforce/apex/AccountController.getAccounts";

// For refreshApex, use named import without trailing slash
import { refreshApex } from "@salesforce/apex";
```

--------------------------------

### Install Salesforce Lightning Types Package

Source: https://lwc.dev/guide/install

Install the @salesforce/lightning-types package using either npm or yarn.

```bash
npm install @salesforce/lightning-types
# OR
yarn add @salesforce/lightning-types
```

--------------------------------

### Example HTML Template for DOM Querying

Source: https://lwc.dev/guide/composition

An example HTML template containing slots to be queried by the component.

```html
<!-- example.html -->
<template>
    <div>First <slot name="task1">Task 1</slot></div>
    <div>Second <slot name="task2">Task 2</slot></div>
</template>
```

--------------------------------

### Install Webpack dependencies

Source: https://lwc.dev/guide/install

Install the necessary packages to build an LWC application using Webpack.

```bash
npm install --save-dev webpack webpack-cli lwc-webpack-plugin lwc @lwc/module-resolver
```

--------------------------------

### Install Rollup dependencies

Source: https://lwc.dev/guide/install

Install the necessary packages to build an LWC application using Rollup.

```bash
npm install --save-dev lwc rollup @lwc/rollup-plugin @rollup/plugin-replace
```

--------------------------------

### Imperative event listener setup

Source: https://lwc.dev/guide/events

Setup for imperative event handling including the owner template, child template, and the JavaScript class using renderedCallback to attach the listener.

```html
<!-- owner.html -->
<template>
    <example-child></example-child>
</template>
```

```html
<!-- child.html -->
<template>
    <button>Click</button>
</template>
```

```javascript
// owner.js
import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    renderedCallback(){
        this.template.querySelector('example-child').addEventListener('click',
         this.handleClick);
    }

    handleClick(e){
        // Your code here
    }
}
```

--------------------------------

### Example Diagnostic Message

Source: https://lwc.dev/guide/error_codes/lwc1010

An example of the LWC1010 error message as it appears in the console.

```text
LWC1010: Failed to resolve entry for module "userCard".
```

--------------------------------

### LWC1116 Diagnostic Examples

Source: https://lwc.dev/guide/error_codes/lwc1116

Examples of diagnostic messages triggered by invalid folder names.

```text
LWC1116: Illegal folder name "ContactCard". The folder name must start with a lowercase character: "contactCard".
```

```text
LWC1116: Illegal folder name "OrderSummary". The folder name must start with a lowercase character: "orderSummary".
```

--------------------------------

### Example Diagnostic Messages for LWC1118

Source: https://lwc.dev/guide/error_codes/lwc1118

Three example diagnostic messages showing the error output for different import paths and file names.

```plaintext
LWC1118: Failed to resolve "./utils.js" from "test.js". Did you mean "Utils"?

```

```plaintext
LWC1118: Failed to resolve "./lib/helper.js" from "myComponent.js". Did you mean "lib/Helper"?

```

```plaintext
LWC1118: Failed to resolve "./other.html" from "myComponent.js". Did you mean "Other"?

```

--------------------------------

### LWC1108 Error Example: Public Properties Starting with "on"

Source: https://lwc.dev/guide/error_codes/lwc1108

A component class that triggers LWC1108 because it declares @api properties and getters with names starting with "on" (onChange, onClick, onLoad).

```javascript
import { api, LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  @api onChange;
  @api onClick;
  
  @api
  get onLoad() {
    return this._value;
  }
}

```

--------------------------------

### Invalid Component Folder Structure

Source: https://lwc.dev/guide/error_codes/lwc1116

An example of a component folder structure that triggers LWC1116 due to the starting uppercase letter.

```text
ContactCard/
├── contactCard.js
├── contactCard.html
```

--------------------------------

### Default export example

Source: https://lwc.dev/guide/javascript_share_code

Exports a single default function from a module.

```javascript
// myFunction.js
export default myFunction () { ··· }

```

--------------------------------

### Public property named dataFooBar causing LWC1107

Source: https://lwc.dev/guide/error_codes/lwc1107

Example of a component class triggering LWC1107 due to an @api property starting with 'data'.

```javascript
import { api, LightningElement } from 'lwc';

export default class Test extends LightningElement {
  @api dataFooBar;
}
```

--------------------------------

### Static Composition Example Components

Source: https://lwc.dev/guide/events

A set of components demonstrating static composition where c-app composes c-parent, which composes c-child.

```html
<!-- body -->
<c-app onbuttonclick={handleButtonClick}></c-app>
```

```html
<!-- app -->
<template>
    <h2>My app</h2>
    <c-parent onbuttonclick={handleButtonClick}></c-parent>
</template>
```

```html
<!-- parent.html -->
<template>
    <h3>I'm a parent component</h3>
    <div class='wrapper' onbuttonclick={handleButtonClick}>
        <c-child onbuttonclick={handleButtonClick}></c-child>
    </div>
</template>
```

```html
<!-- child.html -->
<template>
    <h3>I'm a child component</h3>
    <button onclick={handleClick}>click me</button>
</template>
```

--------------------------------

### Example container usage

Source: https://lwc.dev/guide/composition

Demonstrates passing child components into a container slot, including conditional rendering of child components.

```html
<example-container>
    <example-child></example-child>
    <template lwc:if={addOneMore}>
        <example-child></example-child>
    </template>
</example-container>
```

--------------------------------

### Invalid Event Handler Starting with Underscore

Source: https://lwc.dev/guide/error_codes/lwc1056

This example triggers LWC1056 because the event handler name 'on_itemselect' has an underscore immediately after the 'on' prefix.

```html
<template>
    <div on_itemselect={handleItemSelect}>Click</div>
</template>
```

--------------------------------

### Invalid Event Handler Starting with Number

Source: https://lwc.dev/guide/error_codes/lwc1056

This example triggers LWC1056 because the event handler name 'on123' has a number immediately after the 'on' prefix.

```html
<template>
    <div on123={handleClick}>Click</div>
</template>
```

--------------------------------

### Compiler Setup with experimentalDynamicDirective

Source: https://lwc.dev/guide/error_codes/lwc1130

Shows how to configure the LWC compiler with the experimentalDynamicDirective option enabled, which is required for using lwc:dynamic.

```javascript
import { transformSync } from '@lwc/compiler';

const result = transformSync(source, filename, {
    experimentalDynamicDirective: true,
    // ... other options
});
```

--------------------------------

### Module structure example

Source: https://lwc.dev/guide/javascript_share_code

Shows the directory structure for a shared JavaScript module in a namespace.

```text
mynamespace
    └──myLibrary
        └──myLibrary.js

```

--------------------------------

### Corrected Event Handler Starting with Lowercase Letter

Source: https://lwc.dev/guide/error_codes/lwc1056

This example resolves LWC1056 by ensuring the character immediately following the 'on' prefix is a lowercase letter.

```html
<template>
    <div ona123={handleClick}>Click</div>
</template>
```

--------------------------------

### Complete hello.test.js test file

Source: https://lwc.dev/guide/test

A full example of a Jest test file for the hello component, demonstrating component creation, DOM manipulation, and assertion.

```javascript
// hello.test.js
import { createElement } from 'lwc';
import Hello from 'c/hello';

describe('example-hello', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('displays greeting', () => {
        // Create element
        const element = createElement('example-hello', {
            is: Hello,
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        const div = element.shadowRoot.querySelector('div');
        expect(div.textContent).toBe('Hello, World!');
    });
});
```

--------------------------------

### Public getter/setter pair named dataInfo causing LWC1107

Source: https://lwc.dev/guide/error_codes/lwc1107

Example of a component class triggering LWC1107 due to an @api getter/setter pair starting with 'data'.

```javascript
import { api, LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  _dataInfo;
  
  @api
  get dataInfo() {
    return this._dataInfo;
  }
  
  set dataInfo(value) {
    this._dataInfo = value;
  }
}
```

--------------------------------

### LWC1124 diagnostic messages for invalid attribute names

Source: https://lwc.dev/guide/error_codes/lwc1124

Example diagnostic messages for LWC1124. The first shows an attribute starting with a digit (2_under), the second shows a non-ASCII character (ñana). Both are reported on the x-button element.

```text
LWC1124: 2_under is not valid attribute for x-button. Attribute name must start with an underscore, dollar sign, or an optional hyphen character followed by an alphabetic character.

```

```text
LWC1124: ñana is not valid attribute for x-button. Attribute name must start with an underscore, dollar sign, or an optional hyphen character followed by an alphabetic character.

```

--------------------------------

### Render LWC component on server with renderComponent

Source: https://lwc.dev/guide/ssr

Renders an LWC component on the server using renderComponent from @lwc/ssr-runtime. The example uses express.js to handle a GET request, passing a name query parameter (defaulting to 'World') as a prop. The output markup shows the server-rendered component with its shadow root and a button.

```javascript
import { renderComponent } from '@lwc/ssr-runtime';
import App from 'x/App';

// Example using express.js
app.get("/ssr-app", (req, res) => {
  const name = req.query.name || 'World';
  const ssrRenderedApp = renderComponent('x-app', App, { name });

  return res.send(ssrRenderedApp);
});

```

```html
<x-app>
    #shadowRoot
    Hello <b>World</b>
    <button>Show greeting in modal</button>
</x-app>

```

--------------------------------

### Book List App: app.html, bookEdit.html, bookEdit.js, bookApi.js, server.js

Source: https://lwc.dev/guide/wire_adapter

The Book List app example includes the main app template, the book-edit component template and logic, the wire adapter definitions, and a server abstraction. The app template wires together book-create, book-list, and book-edit components. The book-edit component uses the getBook wire adapter to load a book by ID and dispatches saveedit and canceledit events. The bookApi.js file defines the getBooks and getBook wire adapters and functions to create, delete, and update books. The server.js file provides a BookEndpoint class that simulates a server with a Map-based store.

```html
<!-- app.html -->
<template>
    <c-book-create onbookcreate={handleCreateBook}></c-book-create>

    <c-book-list 
        oneditbook={handleEditBook}
        ondeletebook={handleDeleteBook}
    ></c-book-list>

    <template lwc:if={inEditMode}>
        <c-book-edit
            book-id={editBookId}
            onsaveedit={handleSaveEdition}
            oncanceledit={handleCancelEdition}
        ></c-book-edit>
    </template>
</template>

```

```html
<!-- bookEdit.html -->
<template>
    <input type="hidden" name="id" value={bookId} />
    <input name="title" value={draftTitle} onchange={handleTitleChange} />

    <button onclick={handleSave}>Save</button>
    <button onclick={handleCancel}>Cancel</button>
</template>

```

```javascript
// bookEdit.js
import { LightningElement, api, wire } from 'lwc';
import { getBook } from 'c/bookApi';

export default class BookEdit extends LightningElement {
    @api bookId;
    draftTitle = "";

    @wire(getBook, { id: '$bookId'})
    bookDetails(book) {
        if (book === null) {
            console.error("Book with id %s does not exist", this.bookId);
        }

        this.draftTitle = book.title;
    };

    handleTitleChange(event) {
        this.draftTitle = event.target.value;
    }

    handleSave() {
        this.dispatchEvent(
            new CustomEvent('saveedit', {
                detail: {
                    id: this.bookId,
                    title: this.draftTitle
                }
            })
        );
    }

    handleCancel() {
        this.draftTitle = "";
        this.dispatchEvent(
            new CustomEvent('canceledit')
        );
    }
}

```

```javascript
// bookApi.js
import { bookEndpoint } from './server';

const getBooksInstances = new Set();

function refreshGetBooksInstances() {
    getBooksInstances.forEach(instance => instance._refresh());
}

export class getBooks {
    constructor(dataCallback) {
        this.dataCallback = dataCallback;
        this.dataCallback();
    }

    connect() {
        getBooksInstances.add(this);
    }

    disconnect() {
        getBooksInstances.remove(this);
    }

    update() {
        this._refresh();
    }

    _refresh() {
        const allBooks = bookEndpoint.getAll();
        this.dataCallback(allBooks);
    };
}

export class getBook {
    connected = false;
    bookId;

    constructor(dataCallback) {
        this.dataCallback = dataCallback;
    }

    connect() {
        this.connected = true;
        this.provideBookWithId(this.bookId);
    }

    disconnect() {
        this.connected = false;
    }

    update(config) {
        if (this.bookId !== config.id) {
            this.bookId = config.id;
            this.provideBookWithId(this.bookId);
        }
    }

    providBookWithId(id) {
        if (this.connected && this.bookId !== undefined) {
            const book = bookEndpoint.getById(id);

            if (book) {
                this.dataCallback(Object.assign({}, book));
            } else {
                this.dataCallback(null);
            }
        }
    }
}

export function createBook(title) {
    bookEndpoint.create(title);
    refreshGetBooksInstances();    
}

export function deleteBook(id) {
    bookEndpoint.remove(id);
    refreshGetBooksInstances();
}

export function updateBook(id, newTitle) {
    bookEndpoint.update(id, newTitle);
    refreshGetBooksInstances();
}

```

```javascript
// server.js 
// A server abstraction

class BookEndpoint {
    bookStore = new Map();
    nextBookId = 0;

    getAll() {
        return this.bookStore.values()
    }

    getById(id) {
        return this.bookStore.get(parseInt(id));
    }

    create(title) {
        const book = {
            id: this.nextBookId++,
            title,
        };
        
        this.bookStore.set(book.id, book);
    }

    update(id, title) {
        const book = {
            id: parseInt(id),
            title
        };

        this.bookStore.set(book.id, book);
    }

    remove(id) {
        this.bookStore.delete(parseInt(id));
    }
}

export const bookEndpoint = new BookEndpoint();

bookEndpoint.create('The Way of Kings');

```

--------------------------------

### Light DOM vs Shadow DOM Example

Source: https://lwc.dev/guide/composition

Shows the boundary between light DOM and shadow DOM from different perspectives.

```HTML
<body>
    <p>I'm a paragraph element, part of the light DOM</p>
    <!-- c-child is part of the light DOM.
         But everything within #shadow-root is hidden
         because it's part of c-child's shadow DOM.
    -->
    <c-child>
    #shadow-root
    |   <p>
    |      In c-child, I'm light DOM.
    |      To everyone else, I'm shadow DOM.
    |   </p>
    </c-child>
</body>
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1119

Examples of the LWC1119 error message format.

```text
LWC1119: Failed to resolve @wire adapter "getRecord". Ensure it is imported.
```

```text
LWC1119: Failed to resolve @wire adapter "undefinedAdapter". Ensure it is imported.
```

--------------------------------

### Component directory structure with tests

Source: https://lwc.dev/guide/test

Example project structure showing the placement of test files within the __tests__ directory of a component bundle.

```text
src
├── modules
│   └── foo
│       └── todoList
│           ├── __tests__
│           │	      └── todoList.test.js
│           │	      └── todoList.ssr-test.js
│           ├── todoList.html
│           └── todoList.js
└── main.js
```

--------------------------------

### Example Diagnostic Message

Source: https://lwc.dev/guide/error_codes/lwc1201

A concrete example of the LWC1201 diagnostic message.

```text
LWC1201: The slot attribute in <span> will be ignored due to its ancestor <div>. It must be a direct child of the containing component.
```

--------------------------------

### Component Bundle Directory Structure

Source: https://lwc.dev/guide/reference

Example of a standard LWC component bundle folder structure, including the required HTML, JS, and CSS files, as well as test files.

```text
mynamespace
    └──myComponent
        ├──__tests__
        |       └──myComponent.test.js
        ├──myComponent.html
        ├──myComponent.js
        ├──shareCode.js
        └──myComponent.css
```

--------------------------------

### Diagnostic Message Example

Source: https://lwc.dev/guide/error_codes/lwc1100

Example of the LWC1100 diagnostic message output.

```text
LWC1100: Invalid decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"
```

--------------------------------

### Create Rollup application entry point

Source: https://lwc.dev/guide/install

Define the entry point in src/main.js to mount the LWC application.

```javascript
import { createElement } from 'lwc';
import App from 'x/app';

const elm = createElement('x-app', { is: App });
document.body.appendChild(elm);
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1074

Examples of the diagnostic messages produced by LWC1074.

```text
Invalid expression {exp1;exp2} - LWC1074: Multiple expressions found
```

```text
Invalid expression {exp;} - LWC1074: Multiple expressions found
```

--------------------------------

### Diagnostic Message Example

Source: https://lwc.dev/guide/error_codes/lwc1034

An example of the LWC1034 diagnostic message output.

```text
LWC1034: Ambiguous attribute value title="{myValue}". If you want to make it a valid identifier you should remove the surrounding quotes title={myValue}. If you want to make it a string you should escape it title="\{myValue}".
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1011

Examples of the LWC1011 error message format.

```text
LWC1011: Failed to resolve import "./utils" from "myComponent.js". Please add "utils" file to the component folder.
```

```text
LWC1011: Failed to resolve import "../sharedUtils" from "myComponent.js". Please add "../sharedUtils" file to the component folder.
```

--------------------------------

### Replicate configuration in JavaScript

Source: https://lwc.dev/guide/error_codes/lwc1005

Fix the metadata import error by moving configuration data into a standard JavaScript file.

```javascript
// componentConfig.js
export const API_VERSION = 62;
export const IS_EXPOSED = true;
```

```javascript
import { LightningElement } from 'lwc';
import { API_VERSION } from './componentConfig.js';

export default class MyComponent extends LightningElement {
    version = API_VERSION;
}
```

--------------------------------

### Valid attribute name starting with underscore in LWC template

Source: https://lwc.dev/guide/error_codes/lwc1124

Corrected LWC template that resolves LWC1124 by renaming the attribute to start with an underscore (_col-under), which is a valid starting character.

```html
<template>
    <x-button _col-under="bar"></x-button>
</template>

```

--------------------------------

### Import Salesforce Lightning Types

Source: https://lwc.dev/guide/install

Example of importing a specific Salesforce Lightning type after configuration.

```typescript
import LightningInput from "lightning/input";
```

--------------------------------

### Clone the LWC Recipes Repository

Source: https://lwc.dev/guide/install

Use these commands to download the LWC recipes repository to your local machine.

```bash
git clone https://github.com/trailheadapps/lwc-recipes-oss.git
cd lwc-recipes-oss
```

--------------------------------

### Diagnostic Message Example

Source: https://lwc.dev/guide/error_codes/lwc1021

Example of the error message format returned by the compiler.

```text
LWC1021: Expected a boolean value or 'inline' for outputConfig.sourcemap, received "invalid".
```

--------------------------------

### Light DOM event propagation example

Source: https://lwc.dev/guide/light_dom

A set of components demonstrating how events bubble through nested Light DOM components.

```html
<!-- c-app (shadow DOM) -->
<template>
    <c-light-container onbuttonclick={handleButtonClick}> 
    </c-light-container>
</template>
```

```html
<!-- c-light-container -->
<template lwc:render-mode="light">
    <p>Hello, Light DOM Container</p>
    <!-- c-light-child host -->
    <c-light-child onbuttonclick={handleButtonClick}>
    </c-light-child>
</template>
```

```html
<!-- c-light-child -->
<template lwc:render-mode="light">
    <button onclick={handleClick}>
    </button>
</template>
```

```javascript
// lightChild.js
import { LightningElement } from 'lwc';

export default class LightChild extends LightningElement {
    static renderMode = 'light';
    handleClick(event) {
        this.dispatchEvent(
            new CustomEvent('buttonclick',
                { bubbles: true, composed: false }
            )
        );
    }
}
```

--------------------------------

### Example Diagnostic Messages

Source: https://lwc.dev/guide/error_codes/lwc1144

Common examples of LWC1144 warning messages generated during compilation.

```text
LWC1144: Invalid HTML detected, "<tbody>" was automatically inserted within "<table>"; the compiled template may not match the template source.
LWC1144: Invalid HTML detected, "<br>" was automatically inserted within "<template>"; the compiled template may not match the template source.
LWC1144: Invalid HTML detected, "<tr>" was automatically inserted within "<tbody>"; the compiled template may not match the template source.
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1127

Examples of diagnostic messages produced by the LWC compiler for LWC1127.

```text
LWC1127: Invalid directive "lwc:makeitup" on element <span>.
LWC1127: Invalid directive "lwc:render-mode" on element <p>.
```

--------------------------------

### Provide a JavaScript file to fix LWC1016

Source: https://lwc.dev/guide/error_codes/lwc1016

This example shows how to fix LWC1016 by providing a valid `files` object with a single JavaScript file. It reads the file content from the filesystem and passes it as a string.

```javascript
import { readFile } from 'fs/promises';
import { compile } from '@lwc/sfdc-lwc-compiler';

const componentName = 'myComponent';
const jsFilename = `${componentName}.js`;
// Read file from your component path - this is an example path
const jsFileContent = await readFile(`./example/${jsFilename}`, 'utf8');

const config = {
    bundle: {
        type: 'platform',
        name: componentName,
        namespace: 'c',
        files: {
            [jsFilename]: jsFileContent,
        },
    },
};

const result = await compile(config);

```

--------------------------------

### Creating the component instance

Source: https://lwc.dev/guide/test

Uses the createElement method to instantiate the component for testing.

```javascript
const element = createElement('example-hello', {
    is: Hello
});
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1060

Examples of LWC1060 diagnostic messages for different expression types.

```text
LWC1060: Template expression doesn't allow ThisExpression
```

```text
LWC1060: Template expression doesn't allow CallExpression
```

```text
LWC1060: Template expression doesn't allow BinaryExpression
```

--------------------------------

### Verifying API Call Signature

Source: https://lwc.dev/guide/error_codes/lwc1023

This example shows the correct way to structure the options object and pass it to the transformSync function.

```javascript
import { transformSync } from '@lwc/compiler';

const options = {
    name: 'componentName',       
    namespace: 'namespaceValue'  
};

const result = transformSync(sourceCode, filename, options);
```

--------------------------------

### LWC1052 Diagnostic Message Example

Source: https://lwc.dev/guide/error_codes/lwc1052

An example of how the LWC1052 error appears when reported by the compiler.

```text
Unexpected compilation error: LWC1052: Error parsing attribute: {0}
```

--------------------------------

### Provide multiple component files to fix LWC1016

Source: https://lwc.dev/guide/error_codes/lwc1016

This example shows how to fix LWC1016 by providing a `files` object with multiple component files (JavaScript, HTML, and CSS). Each file's content is a string.

```javascript
import { compile } from '@lwc/sfdc-lwc-compiler';

const jsFilename = 'myComponent.js';
const jsFileContent = `
    import { LightningElement } from 'lwc';
    export default class MyComponent extends LightningElement {}
`;

const htmlFilename = 'myComponent.html';
const htmlFileContent = '<template><div>Hello</div></template>';

const cssFilename = 'myComponent.css';
const cssFileContent = '.container { padding: 10px; }';

const config = {
    bundle: {
        type: 'platform',
        name: 'myComponent',
        namespace: 'c',
        files: {
            [jsFilename]: jsFileContent,
            [htmlFilename]: htmlFileContent,
            [cssFilename]: cssFileContent,
        },
    },
};

const result = await compile(config);

```

--------------------------------

### Identifier starting with a hyphen error

Source: https://lwc.dev/guide/error_codes/lwc1059

Identifiers cannot start with a hyphen, digit, or other special characters.

```html
<template>
    <template for:each={items} for:item="-foo"></template>
</template>
```

--------------------------------

### Re-export all resources example

Source: https://lwc.dev/guide/javascript_share_code

Exports all resources from another module using a relative file path.

```javascript
export * from './utils';

```

--------------------------------

### Slotting content and components

Source: https://lwc.dev/guide/light_dom

Demonstrates inserting text and various component types into named and default slots.

```html
<my-component>
    <!-- Inserted into the content slot -->
    <div slot="content">Some text here</div>
</my-component>

<my-component>
    <!-- Inserted into the content slot -->
    <my-shadow-lwc slot="content">Some text here</my-shadow-lwc>
</my-component>

<my-component>
    <!-- Inserted into the content slot -->
    <my-light-lwc slot="content">Some text here</my-light-lwc>
</my-component>

<my-component>
    <!-- Inserted into the default slot -->
    <my-shadow-lwc>Some text here</my-shadow-lwc>
</my-component>

<my-component>
    <!-- Inserted into the default slot -->
    <my-light-lwc>Some text here</my-light-lwc>
</my-component>
```

--------------------------------

### Correct Options Object Implementation

Source: https://lwc.dev/guide/error_codes/lwc1023

This example demonstrates how to resolve LWC1023 by providing a valid options object with the required name and namespace properties.

```javascript
import { transformSync } from '@lwc/compiler';

const source = `
    import { LightningElement } from 'lwc';
    export default class MyComponent extends LightningElement {}
`;

const result = transformSync(source, 'myComponent.js', {
    name: 'myComponent',
    namespace: 'c'
});

console.log('Success! Code compiled:', result.code.length, 'bytes');
```

--------------------------------

### recipe-hello Component Template

Source: https://lwc.dev/guide/composition

Defines a simple component template using a ui-card wrapper with child content.

```HTML
<template>
    <ui-card title="Hello">
        <div>Some content in child component</div>
    </ui-card>
</template>
```

--------------------------------

### Example LWC1130 Diagnostic Message

Source: https://lwc.dev/guide/error_codes/lwc1130

An example diagnostic message for LWC1130, showing the error with the element <c-dynamic-loader>.

```text
LWC1130: Invalid lwc:dynamic usage on element "<c-dynamic-loader>". The directive binding must be an expression.
```

--------------------------------

### Create LWC component files

Source: https://lwc.dev/guide/install

Define the JavaScript class and HTML template for the x/app component.

```javascript
import { LightningElement } from 'lwc';

export default class App extends LightningElement {}
```

```html
<template>
    <h1>Hello world</h1>
</template>
```

--------------------------------

### Step 2: Import Wire Adapter

Source: https://lwc.dev/guide/error_codes/lwc1097

This snippet shows the import statement for a standard wire adapter from 'lightning/uiRecordApi'. It is part of the suggested fix steps.

```JavaScript
import { getRecord } from 'lightning/uiRecordApi';

```

--------------------------------

### Compiler Setup for lwc:is Migration

Source: https://lwc.dev/guide/error_codes/lwc1130

Shows the compiler configuration with enableDynamicComponents: true, required for using the recommended lwc:is directive on <lwc:component>.

```javascript
import { transformSync } from '@lwc/compiler';

const result = transformSync(source, filename, {
    enableDynamicComponents: true,
    // ... other options
});
```

--------------------------------

### Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1038

Examples of error messages triggered by invalid computed property access in templates.

```text
Invalid expression {classNames[0]} - LWC1038: Template expression doesn't allow computed property access
```

```text
Invalid expression {items[index]} - LWC1038: Template expression doesn't allow computed property access
```

```text
Invalid expression {data[key]} - LWC1038: Template expression doesn't allow computed property access
```

--------------------------------

### Light DOM and Shadow DOM Composition

Source: https://lwc.dev/guide/light_dom

Example showing a parent component containing both Light DOM and Shadow DOM child components.

```html
<my-app>
    #shadow-root (open)
    |    <my-header>
    |        <p>Hello World</p>
    |    </my-header>
    |    <my-footer>
    |        #shadow-root (open)
    |        |    <p>Footer</p>
    |    </my-footer>
</my-app>
```

--------------------------------

### LWC1027 Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1027

Examples of the LWC1027 error message showing different received types.

```text
LWC1027: Expect a string for id. Received undefined
LWC1027: Expect a string for id. Received null
```

--------------------------------

### Iteration directive syntax reference

Source: https://lwc.dev/guide/error_codes/lwc1046

A summary of expected types and syntax examples for common LWC iteration directives.

```markdown
Directive | Expected Type | Example  
---|---|---  
`for:each` | Expression | `for:each={items}`  
`for:item` | String | `for:item="item"`  
`for:index` | String | `for:index="index"`  
`key` | Expression | `key={item.id}`
```

--------------------------------

### Example of problematic code

Source: https://lwc.dev/guide/error_codes/lwc1131

A generic example showing the use of computed property syntax that causes the LWC1131 error.

```javascript
@wire(Adapters['getRecord'], config) wiredData;
```

--------------------------------

### Rendered HTML of example-slot-wrapper

Source: https://lwc.dev/guide/composition

The rendered HTML output showing the replacement of the unnamed slot with content from the wrapper.

```html
<example-slot-wrapper>
    <example-slot-demo>
        <h1>Content in Slot Demo</h1>
        <div>
            <slot><p>Content from Slot Wrapper</p></slot>
        </div>
    </example-slot-demo>
</example-slot-wrapper>
```

--------------------------------

### LWC1125 Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1125

Examples of diagnostic messages produced by the compiler when encountering invalid trailing characters.

```text
LWC1125: trailing_ is not valid attribute for x-button. Attribute name must end with alpha-numeric character.
```

```text
LWC1125: hyphen- is not valid attribute for x-button. Attribute name must end with alpha-numeric character.
```

--------------------------------

### Component Folder Structure for Resolution

Source: https://lwc.dev/guide/error_codes/lwc1011

Shows the expected file structure when adding a missing utility file to resolve the error.

```text
myComponent/
├── myComponent.js
├── myComponent.html
└── utils.js          ← Add utils.js or utils.html or utils.css, etc.
```

--------------------------------

### LWC1071 Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1071

Examples of diagnostic messages generated for different HTML elements missing a key.

```text
LWC1071: Missing key for element <p> inside of iterator. Elements within iterators must have a unique, computed key value.
```

```text
LWC1071: Missing key for element <div> inside of iterator. Elements within iterators must have a unique, computed key value.
```

```text
LWC1071: Missing key for element <c-contact-card> inside of iterator. Elements within iterators must have a unique, computed key value.
```

--------------------------------

### Reference Component in Markup

Source: https://lwc.dev/guide/reference

Demonstrates how to reference a component named 'myComponent' in the 'example' namespace using kebab case in an HTML template.

```html
<template>
    <example-my-component></example-my-component>
</template>
```

--------------------------------

### JavaScript Class for Nested Iteration Example

Source: https://lwc.dev/guide/error_codes/lwc1041

The JavaScript class providing the data structure for the nested iteration example.

```javascript
import { LightningElement } from 'lwc';

export default class CategoryList extends LightningElement {
    categories = [
        {
            id: 'cat-1',
            name: 'Fruits',
            items: [
                { id: 'f1', name: 'Apple' },
                { id: 'f2', name: 'Banana' }
            ]
        },
        {
            id: 'cat-2',
            name: 'Vegetables',
            items: [
                { id: 'v1', name: 'Carrot' },
                { id: 'v2', name: 'Broccoli' }
            ]
        }
    ];
}
```

--------------------------------

### LWC1080 Diagnostic Message Examples

Source: https://lwc.dev/guide/error_codes/lwc1080

Examples of diagnostic messages generated when specific invalid attributes are detected on the root template.

```text
LWC1080: Root template has unknown or disallowed attributes: role
LWC1080: Root template has unknown or disallowed attributes: lwc:is
LWC1080: Root template has unknown or disallowed attributes: lwc:slot-data
```

--------------------------------

### Use a Light DOM component with slots

Source: https://lwc.dev/guide/light_dom

Demonstrates how to pass content into the named and default slots of a light DOM component.

```html
<my-component>
   <p>Default slotted content</p>
   <h1 slot="title">Component Title</h1>
</my-component>
```

--------------------------------

### LWC1035 Diagnostic Message Example 3

Source: https://lwc.dev/guide/error_codes/lwc1035

Example of the LWC1035 error message when an aria-label attribute contains an ambiguous value.

```text
LWC1035: Ambiguous attribute value aria-label={label}text. If you want to make it a string you should escape it aria-label="\{label}text"
```

--------------------------------

### Resolution: Migrate to lwc:is with enableDynamicComponents

Source: https://lwc.dev/guide/error_codes/lwc1129

Recommended migration path using lwc:is on lwc:component with the enableDynamicComponents compiler option.

```javascript
import { transformSync } from '@lwc/compiler';

const result = transformSync(source, filename, {
    enableDynamicComponents: true,
    // ... other options
});
```

```html
<template>
    <lwc:component lwc:is={dynamicCtor}></lwc:component>
</template>
```
Tokens:
Raw