Lightning Web Components

https://lwc.dev
Admin
Lightning Web Components is an enterprise-grade web components framework built on standard HTML,...
Tokens:185,911
Snippets:2,599
Trust Score:8.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and Run LWR Project

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

After scaffolding your LWC project with LWR, navigate to the project directory, install dependencies, and start the development server.

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

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

### Initialize LWC Project with LWR

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

Use the npm init command to scaffold a new LWC project with the Lightning Web Runtime. This command guides you through the setup process.

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

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

### Create and Register a Custom Element with Shadow DOM

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

This example shows how to create a custom element, attach a shadow root in open mode, and set its inner HTML. It also demonstrates the LWC component setup to render this custom element.

```javascript
// main.js
import { createElement } from "lwc";
import App from "x/app";

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

customElements.define('my-custom-element', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' })
      .innerHTML = '<div>I am a third-party web component!</div>';
  }
});
```

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

### Slot Forwarding Container Setup

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

Initial setup for passing content into a component for slot forwarding.

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

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

### Install Lightning Types Package

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

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

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

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

### Install Jest and LWC Jest Packages

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

Commands to install the core Jest framework and the LWC-specific presets or individual transformer, resolver, and serializer packages.

```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
```

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

### Example LWC Compiler Options Object

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

This example shows the structure of a typical options object expected by the LWC compiler, including 'name' and 'namespace'.

```javascript
const options = {
    name: 'componentName',       // Component name (camelCase, no file extension) such as 'myButton', 'userCard'
    namespace: 'namespaceValue'  // Namespace identifier such as 'c', 'x', or your org namespace
};

```

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

### Install and Create LWC App

Source: https://lwc.dev/

Use the lwr tool to install Lightning Web Components and create a new application. Follow the terminal prompts to select project type and variant.

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

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

### Diagnostic Message Examples

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

Examples of diagnostic messages for different decorators.

```text
LWC1104: "track" can only be used as a class decorator
```

```text
LWC1104: "api" can only be used as a class decorator
```

```text
LWC1104: "wire" can only be used as a class decorator
```

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

### Corrected Component Folder Structure

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

Example of a component folder structure after renaming the folder to start with a lowercase character, resolving the LWC1116 error.

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

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

### Diagnostic Message Examples

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

Examples of the LWC1039 error message format.

```text
LWC1039: iterator:items directive is expected to be an expression
```

```text
LWC1039: iterator:products directive is expected to be an expression
```

```text
LWC1039: iterator:records directive is expected to be an expression
```

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

### Array of items for list

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

An example array of items to be displayed in a list.

```javascript
const items = [
    {label : "item1"},
    {label : "item2"},
    {label : "item3"}
 ];
```

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

### Reference Component in Markup

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

Example of how to reference a component named myComponent in the example namespace within an HTML template.

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

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

### Example Diagnostic Message for LWC1102

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

An example of the error message produced by LWC1102, showing the decorator name and the expected import source.

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

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

### LWC1011 Error Message Example

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

This is an example of the diagnostic message produced when an import path error occurs.

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

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

### LWC1011 Error Message Example with Relative Path

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

Another example of the LWC1011 error message, demonstrating an import path that navigates up the directory structure.

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

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

### Valid CSS Syntax Example

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

This is a corrected version of the CSS syntax error examples, demonstrating valid CSS syntax with proper braces and semicolons.

```css
.container {
    color: red;
    background: blue;
}


```

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

### Diagnostic Message Examples

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

Examples of the LWC1060 error message format showing different unsupported 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
```

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

### Example Diagnostic Messages for LWC1024

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

These are examples of how the LWC1024 error message might appear, indicating unexpected file content for specific files.

```text
LWC1024: Unexpected file content for "foo.css". Expected a string, received "null".
```

```text
LWC1024: Unexpected file content for "foo.js". Expected a string, received "undefined".
```

```text
LWC1024: Unexpected file content for "foo.html". Expected a string, received "[object Object]".
```

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

### Example Diagnostic Message for LWC1052

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

An example of a diagnostic message that might be logged when LWC1052 occurs. The {0} placeholder is filled with the specific compilation error.

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

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

### Event Handler Starting with Underscore (Error)

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

This example shows an LWC template with an event handler attribute that starts with an underscore after the 'on' prefix, causing LWC1056.

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

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

### Corrected for:each and for:item usage

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

These examples resolve LWC1044 by ensuring both directives are present.

```html
<template>
    <template for:each={items} for:item="item">
        <p key={item.id}>{item.name}</p>
    </template>
</template>
```

```html
<template>
    <div for:each={items} for:item="item" key={item.id}>
        <p>{item.name}</p>
    </div>
</template>
```

```html
<template>
    <template for:each={items} for:item="item" for:index="idx">
        <p key={item.id}>{idx}: {item.name}</p>
    </template>
</template>
```

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

### Event Handler Starting with Number (Error)

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

This example shows an LWC template with an event handler attribute that starts with a number after the 'on' prefix, causing LWC1056.

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

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

### Event Handler Starting with Number (Resolution)

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

This example demonstrates the correct way to name an event handler attribute in LWC, starting with a lowercase letter after the 'on' prefix.

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

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

### Implement the server abstraction

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

A mock server implementation using a Map to store book data and provide CRUD operations.

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

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

### LWC1118 Diagnostic Message Examples

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

Examples of the LWC1118 error message format showing the failed import path, the source file, and the suggested correction.

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

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

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

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

### Event Handler Starting with Underscore (Resolution)

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

This example demonstrates the correct way to name an event handler attribute in LWC when using underscores, ensuring it starts with a lowercase letter after 'on'.

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

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

### Install LWC Rollup Dependencies

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

Install the necessary npm packages for building LWC applications using Rollup. This includes LWC, Rollup, and related plugins.

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

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

### Invalid Public Property Declarations

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

Example of a component class triggering LWC1108 due to @api properties starting with 'on'.

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

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

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

### Install LWC Webpack Dependencies

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

Install the necessary packages for integrating LWC with Webpack. This includes Webpack itself, the LWC Webpack plugin, and LWC core packages.

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

```

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

### Shadow DOM Structure Example

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

Illustrates the encapsulated structure of components using Shadow DOM, showing the shadow root and its contents.

```text
<recipe-hello>
    #shadow-root
    |   <ui-card>
    |       #shadow-root
    |       |    <div>Some content in child component</div>
    |    </ui-card>
</recipe-hello>
```

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

### Invalid Component Folder Structure

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

Example of a component folder structure where the folder name starts with an uppercase letter, causing the LWC1116 error.

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

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

### Importing an SCSS file for component styles (Error Example)

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

This example demonstrates an LWC component attempting to import an SCSS file directly, which causes LWC1005 because the LWC compiler only transforms plain .css files.

```javascript
import { LightningElement } from 'lwc';
import styles from './card.scss';

export default class Card extends LightningElement {}

```

```css
/* card.scss */
$primary-color: #0070d2;
$border-radius: 8px;

.card {
    border-radius: $border-radius;
    
    &__header {
        background: $primary-color;
        color: white;
    }
}

```

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

### Using Dynamic Imports for Internal Components

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

This example demonstrates using dynamic imports for custom components, which is a recommended alternative to importing reserved modules.

```javascript
// Use standard JavaScript features like dynamic imports if required
await import('c/myComponent');
```

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

### connectStore Wire Adapter Example

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

The `connectStore` wire adapter provisions data to components by subscribing to a store and notifying on state changes. It handles connecting, disconnecting, and updating the store subscription.

```javascript
export class connectStore {
    dataCallback;
    store;
    subscription;
    connected = false;

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

    connect() {
        this.connected = true;
        this.subscribeToStore();
    }

    disconnect() {
        this.unsubscribeFromStore();
        this.connected = false;
    }

    update(config) {
        this.unsubscribeFromStore();
        this.store = config.store;
        this.subscribeToStore();
    }

    subscribeToStore() {
        if (this.connected && this.store) {
            const notifyStateChange = () => {
                const state = this.store.getState();
                this.dataCallback(state);
            };
            this.subscription = this.store.subscribe(notifyStateChange);
            notifyStateChange();
        }
    }

    unsubscribeFromStore() {
        if (this.subscription) {
            this.subscription();
            this.subscription = undefined;
        }
    }
}
```

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

### Diagnostic Message Examples

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

Examples of the LWC1703 error message format.

```text
LWC1703: Invalid module identifier "@salesforce/user/'-alert(window)-'".
```

```text
LWC1703: Invalid module identifier "@salesforce/user/Name".
```

```text
LWC1703: Invalid module identifier "".
```

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

### Instantiating a Component for Testing

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

Use createElement to create an instance of the component under test.

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

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

### Diagnostic Message Examples

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

Examples of the LWC1095 error message format.

```text
LWC1095: @wire method or property cannot be used with @api
```

```text
LWC1095: @wire method or property cannot be used with @track
```

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

### Migrate to lwc:is (Recommended)

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

This code demonstrates the recommended solution by replacing `lwc:dynamic` with `lwc:is` on a `<lwc:component>` element. This requires `enableDynamicComponents: true` in the compiler configuration.

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

```javascript
transformSync(html, filename, {
    enableDynamicComponents: true,
    // ... other options
});
```

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

### Resolve LWC1016: Provide multiple component files

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

This example demonstrates how to resolve LWC1016 by providing multiple component files (JS, HTML, CSS) within the 'files' object. Each file should have its name as the key and its content as the value.

```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);

```

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

### 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
```

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

### Light DOM vs Shadow DOM Example

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

Demonstrates the distinction between elements in the light DOM and those encapsulated within a component's shadow DOM.

```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>
```

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

### LWC1103 Diagnostic Message Examples

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

Examples of diagnostic messages generated by the compiler.

```text
LWC1103: "@track" can only be applied on class properties
```

```text
LWC1103: "@api" can only be applied on class properties
```

```text
LWC1103: "@wire" can only be applied on class properties
```

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

### Component Directory Structure

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

Recommended file structure for organizing LWC components and their corresponding test files.

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

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

### Example Diagnostic Messages

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

Examples of the LWC1119 error message as it appears in diagnostics.

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

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

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

### Define the main application template

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

The main entry point for the Book List app, orchestrating child components for creating, listing, and editing books.

```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>
```

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

### Example diagnostic message

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

An example of how the LWC1008 error appears with an underlying TypeError.

```text
TypeError: LWC1008: Cannot read properties of undefined (reading 'map')
```

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

### Invalid for:item usage examples

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

These examples trigger LWC1044 because the for:each directive is missing.

```html
<template>
    <template for:item="item">
        <p>Item name</p>
    </template>
</template>
```

```html
<template>
    <div for:item="item">
        <p>Item name</p>
    </div>
</template>
```

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

### Invalid for:each usage examples

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

These examples trigger LWC1044 because the for:item directive is missing.

```html
<template>
    <template for:each={items}>
        <p>Item name</p>
    </template>
</template>
```

```html
<template>
    <div for:each={items}>
        <p>Item name</p>
    </div>
</template>
```

```html
<template>
    <template for:each={items} for:index="idx">
        <p key={idx}>Item name</p>
    </template>
</template>
```

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

### Create LWC Application Entry Point

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

Define the entry point for your LWC application in src/index.js. This script imports and renders the root LWC component.

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

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

```

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

### Example Diagnostic Message

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

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

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

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

### Light DOM Component Rendering with Scoped Styles

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

This example shows the rendered output of a Light DOM component with both unscoped and scoped styles applied. Observe how :host is transformed in the scoped style to apply the blue background.

```html
<c-shadow><!-- red background -->
#shadow-root
   <c-light class="c-light_light-host"><!-- blue background -->
       <style>
           :host { background: red; }
           :c-light_light-host { background: blue; }
       </style>
   </c-light>
</c-shadow>
```

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

### LWC1130 Diagnostic Message Example

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

An example of the diagnostic message produced by the LWC1130 error.

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

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

### Resolving LWC1028 with Valid Config Objects

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

These examples show the correct way to provide a configuration object to the compile function.

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

const result = compile('<template>Hello</template>', 'myComponent.html', {});
```

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

const result = compile('<template>Hello</template>', 'myComponent.html', {
    preserveHtmlComments: false,
    enableStaticContentOptimization: true,
});
```

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

### Nested Iterator Error Examples

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

Examples showing LWC1039 in nested iterator structures.

```html
<template>
    <template iterator:categories="categoryList">
        <div key={categories.value.id}>
            <h2>{categories.value.name}</h2>
            <template iterator:items="categories.value.items">
                <p key={items.value.id}>{items.value.title}</p>
            </template>
        </div>
    </template>
</template>
```

```html
<template>
    <template iterator:sections={sectionData}>
        <div key={sections.value.id}>
            <template iterator:rows="sections.value.rows">
                <span key={rows.value.id}>{rows.value.text}</span>
            </template>
        </div>
    </template>
</template>
```

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

### Valid MathML for Fractions

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

This example demonstrates how to correctly represent fractions using the <mfrac> MathML element, resolving the LWC1050 error.

```html
<template>
    <math>
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </math>
</template>
```

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

### Mixed Shadow and Light DOM Composition

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

Example showing how components using different DOM modes can be composed together.

```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>
```

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

### Identifier starting with hyphen error

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

JavaScript identifiers cannot start with a hyphen, which triggers LWC1059.

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

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

### Correctly Calling parse()

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

These examples show how to correctly call the parse() function by either omitting the config parameter or providing a valid configuration object.

```javascript
import { parse } from '@lwc/template-compiler';

// Option 1: Omit config entirely (defaults to {})
const result = parse('<template>Hello</template>');

```

```javascript
// Option 2: Pass a config object
const result2 = parse('<template>Hello</template>', {
    preserveHtmlComments: true,
});

```

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

### LWC1049 Diagnostic Message Example

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

Example of the error message format generated by the LWC compiler.

```text
LWC1049: Forbidden svg namespace tag found in template: '<script>' tag is not allowed within <svg>
```

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

### LWC1121 Resolution Examples

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

Correct patterns for dynamic imports to satisfy LWC strict mode requirements.

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

export default class MyComponent extends LightningElement {
    async loadComponent() {
        const module = await import('x/myComponent');
    }
}
```

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

export default class MyComponent extends LightningElement {
    async loadModule(type) {
        let module;
        if (type === 'componentA') {
            module = await import('x/componentA');
        } else if (type === 'componentB') {
            module = await import('x/componentB');
        }
        return module;
    }
}
```

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

### Importing Data Files Error

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

Attempting to import a JSON configuration file directly.

```javascript
import { LightningElement } from 'lwc';
import endpoints from './api-endpoints.json';

export default class DataFetcher extends LightningElement {
    async connectedCallback() {
        // Trying to use endpoints from JSON config
        const response = await fetch(endpoints.users);
        this.users = await response.json();
    }
}
```

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

### LWC1709 Diagnostic Message Examples

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

Examples of LWC1709 error messages as they appear in different file types.

```text
LWC1709: Syntax error encountered while parsing file c/myComponent/myComponent.js. Cause: Unterminated string constant. (5:12)
LWC1709: Syntax error encountered while parsing file c/myComponent/myComponent.css. Cause: Unclosed block
LWC1709: Syntax error encountered while parsing file c/myComponent/myComponent.html. Cause: Parser internal error
```

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

### Recipe Hello Component Markup

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

This is the template markup for a simple 'recipe-hello' component that includes a 'ui-card' child component.

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

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

### Error Resolution: Generate an inline source map

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

This example demonstrates how to enable inline source map generation by setting outputConfig.sourcemap to 'inline'.

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

const result = transformSync(source, 'main.js', {
    namespace: 'c',
    name: 'main',
    outputConfig: {
        sourcemap: 'inline',
    },
});
// result.code contains //# sourceMappingURL=data:application/json;...

```

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

### LWC1124 Error Message Example

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

Example of a diagnostic message for LWC1124, indicating an invalid attribute name.

```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.
```

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

### Error Resolution: Generate an external source map

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

This example shows how to correctly configure the outputConfig.sourcemap property to generate an external source map by setting it to true.

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

const result = transformSync(source, 'main.js', {
    namespace: 'c',
    name: 'main',
    outputConfig: {
        sourcemap: true,
    },
});
// result.map contains the source map object

```

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

### Example LWC1116 Diagnostic Messages

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

Illustrative examples of the LWC1116 error message as it might appear in diagnostics.

```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 LWC1057 Diagnostic Message

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

An example of the LWC1057 warning message as it might appear during template compilation.

```text
LWC1057: unknown-attr is not valid attribute for textarea. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
```

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

### Configure tsconfig.json

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

Add a reference to your `.d.ts` file in the `include` section of your `tsconfig.json`.

```json
{
  "compilerOptions": {
    // ...
  },
  "include": ["src", "types"],
}
```

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

### LWC1036 Diagnostic Example

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

Example of the diagnostic message generated by the LWC compiler for an incorrect boolean attribute.

```text
LWC1036: To not set a boolean attribute, try <input> instead of <input required="false">.
To represent a false value, the attribute has to be omitted altogether.
```

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

### Importing from an Unknown @salesforce Module

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

This example illustrates an import from a module that is not recognized by the Salesforce framework, leading to the LWC1704 error.

```javascript
import something from "@salesforce/unknownModule/value";
```

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

### Clone LWC Recipes Repository

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

Clone the official LWC recipes repository to access example code and learn how to build LWC applications.

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

```

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

### Importing Metadata File Error

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

Attempting to import a .js-meta.xml file directly into a component class.

```javascript
import { LightningElement } from 'lwc';
import componentMetadata from './myComponent.js-meta.xml';

export default class MyComponent extends LightningElement {
    version = componentMetadata.LightningComponentBundle.apiVersion;
}
```

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

### Configure Jest Module Mapping

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

Example configuration for mapping LWC component namespaces to their source directories.

```json
{
    "preset": "@lwc/jest-preset",
    "moduleNameMapper": {
        "^(example|other)/(.+){{BODY}}quot;: "<rootDir>/src/test/modules/$1/$2/$2"
    }
}
```

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

### Resolve LWC1016: Provide a JavaScript file

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

This example shows how to resolve LWC1016 by providing a valid JavaScript file within the 'files' object. Ensure the file content is read correctly.

```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);

```

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

### LWC1144 Warning Message Examples

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

These are example diagnostic messages for LWC1144, showing the inserted tag and the parent element.

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

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

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

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

### Full Jest Test File Structure

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

A complete example of a Jest test file for a Lightning Web Component, demonstrating imports, DOM cleanup, and component verification.

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

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

### Example Diagnostic Message: Trailing Hyphen

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

An example of a diagnostic message for LWC1125 when an attribute name ends with a hyphen.

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

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

### Example Diagnostic Message: Trailing Underscore

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

An example of a diagnostic message for LWC1125 when an attribute name ends with an underscore.

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

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

### Importing @salesforce Modules

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

Use these patterns to correctly import Salesforce-specific resources, schemas, and Apex methods.

```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";
```

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

### Verifying API Call Signature for transformSync

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

This example illustrates the correct API call signature for the transformSync function, ensuring the options object is passed as the third argument.

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

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

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

```

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

### Example Diagnostic Messages for LWC1050

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

These are example diagnostic messages that illustrate the LWC1050 error with specific forbidden tags.

```text
LWC1050: Forbidden MathML namespace tag found in template: '<script>' tag is not allowed within <math>
```

```text
LWC1050: Forbidden MathML namespace tag found in template: '<object>' tag is not allowed within <math>
```

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

### LWC1023 Error Message Example

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

This is an example of the diagnostic message for LWC1023, indicating an invalid options object was received.

```text
LWC1023: Expected options object, received "undefined".
```

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

### Verify Iteration Directive Syntax

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

Reference table for correct syntax and expected types for LWC iteration directives.

```text
for:each | Expression | for:each={items}
for:item | String | for:item="item"
for:index | String | for:index="index"
key | Expression | key={item.id}
```

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

### Providing Required Resource Identifier for @salesforce Modules

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

These examples demonstrate the correct way to import @salesforce modules by including the necessary resource identifier.

```javascript
import myLabel from "@salesforce/label/c.MyCustomLabel";
import hasAdminAccess from "@salesforce/customPermission/AdminAccess";
import getAccounts from "@salesforce/apex/AccountController.getAccounts";
```

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

### LWC1197 Error Message Examples

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

These are examples of diagnostic messages for LWC1197, showing how the error is reported with context about the invalid expression.

```text
LWC1197: Invalid expression {value + 1 /* block comment */} - LWC1197: Use of comments is disallowed within template expressions.
```

```text
LWC1197: Invalid expression {
            // what do you think ? 
            someValue
        } - LWC1197: Use of comments is disallowed within template expressions.
```

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

### Error Message Example

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

An example of the LWC1140 error message, indicating invalid lwc:inner-html usage on a custom element.

```text
LWC1140: Invalid lwc:inner-html usage on element "<c-rich-text>". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.
```

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

### Example of LWC1011: Missing File Import

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

This code snippet demonstrates an LWC component that fails with LWC1011 due to an import of a non-existent local utility file.

```javascript
import { LightningElement } from 'lwc';
import { formatDate } from './utils';

export default class MyComponent extends LightningElement {
    formattedDate = formatDate(new Date());
}
```

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

### LWC1121 Error Examples

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

Examples of code that trigger the LWC1121 error due to non-string literal arguments in dynamic imports.

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

export default class MyComponent extends LightningElement {
    async loadComponent() {
        const id = 'x/myComponent';
        const module = await import(id);
    }
}
```

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

export default class MyComponent extends LightningElement {
    async loadModule(moduleName) {
        const module = await import(moduleName);
        return module;
    }
}
```

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

export default class MyComponent extends LightningElement {
    async loadComponent() {
        const namespace = 'x';
        const module = await import(`${namespace}/myComponent`);
    }
}
```

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

### LWC1037 Diagnostic Message Examples

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

Examples of the LWC1037 error message as it appears in diagnostic output for different HTML elements.

```text
LWC1037: To set a boolean attributes, try <input disabled> instead of <input disabled="true">. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name with no leading or trailing whitespace.
```

```text
LWC1037: To set a boolean attributes, try <button autofocus> instead of <button autofocus="true">. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name with no leading or trailing whitespace.
```

```text
LWC1037: To set a boolean attributes, try <video autoplay> instead of <video autoplay="true">. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name with no leading or trailing whitespace.
```

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

### Using Valid Imports for UI Components

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

This example shows a correct import statement for a standard UI API module, which can be used to resolve issues with unrecognized modules.

```javascript
// Check for typos in @salesforce module names
import { getRecord } from 'lightning/uiRecordApi';
```

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

### LWC1135 Error Message Example

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

An example of the diagnostic message generated for the LWC1135 error, indicating an invalid directive on a specific element.

```text
LWC1135: Invalid directive 'lwc:dom' on element <p>. 'lwc:dom' is not necessary in Light DOM components.
```

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

### LWC1129 Error Message Example

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

Example of a diagnostic message for LWC1129, indicating invalid lwc:dynamic usage on a div element.

```text
LWC1129: Invalid lwc:dynamic usage on element "<div>". This directive can only be used in a custom element.
```

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

### Directory Structure for Missing File Resolution

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

Illustrates the directory structure required to resolve a missing file import by adding the necessary utility file.

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

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

### LWC1124 Error Message Example with Non-ASCII Character

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

Example of a diagnostic message for LWC1124 when the attribute name contains a non-ASCII 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.
```

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

### Resolved: Root template with closing tag

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

This is the corrected version of the root template example, now including the closing `</template>` tag.

```html
<template>
    <div>Hello World</div>
</template>


```

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

### Using for:each on a Slot (Error Example)

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

This example shows an incorrect usage of the `for:each` directive directly on a `<slot>` element, which results in LWC1082 error.

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

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

### Shadow DOM CSS Cascading Example

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

Demonstrates how styles defined within a shadow root cascade into light DOM children mounted within that same shadow root.

```html
<my-app>
    #shadow-root (open)
    |    <style> p { color: green; }</style>
    |    <p>This is a paragraph in shadow DOM</p>
    |    <my-container>
    |        <p>This is a paragraph in light DOM</p>
    |    </my-container>
</my-app>
```

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

### Forbidden Template Tags Examples

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

Examples of HTML templates that trigger the LWC1051 error due to the inclusion of restricted document-level tags.

```html
<template>
    <script src="/assets/analytics.js"></script>
</template>
```

```html
<template>
    <title>User Dashboard</title>
</template>
```

```html
<template>
    <meta name="description" content="Dashboard view" />
</template>
```

```html
<template>
    <link href="styles/theme.css" />
</template>
```

```html
<template>
    <base href="https://salesforce.com" />
</template>
```

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

### LWC Template Migrated to lwc:is

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

An LWC template demonstrating the recommended migration to lwc:is with <lwc:component>.

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

```
Tokens:
Raw