Component Folder
When we create a lwc component we basically get 3 files in component folder .js .xml .html but you can also include .css .svg files in your component as well by keeping same name and you can also include files with different name as well but if you use different name then you have to import them lwc will not include them directly.
The folder and its files must follow these naming rules.
- Must begin with a lowercase letter
- Must contain only alphanumeric or underscore characters
- Must be unique in the namespace
- Can’t include whitespace
- Can’t end with an underscore
- Can’t contain two consecutive underscores
- Can’t contain a hyphen (dash)
Component HTML File
Every UI component must have an HTML file with the root tag <template>. Without <template> tag it will throw error.
<!-- myComponent.html -->
<template>
<!-- Replace comment with component HTML -->
</template>
When a component renders, the <template> tag is replaced with the name of the component, <namespace-component-name>. For example, in the browser console, myComponent renders as <c-my-component>, where c is the default namespace.
Component JavaScript File
JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.
To import a class, function, or variable declared in a module, use the import statement. To allow other code to use a class, function, or variable declared in a module, use the export statement.
A component’s JavaScript file can have a maximum file size of 128 KB (131,072 bytes).
Every component must have a JavaScript file. If the component renders UI, the JavaScript file defines the HTML element. If the component is a service component (library), the JavaScript file exports functionality for other components to use.
The JavaScript file follows the naming convention .js, such as myComponent.js.
Every UI component must include a JavaScript file with at least this code.
import { LightningElement } from 'lwc'; // `LightningElement` is a custom wrapper of the standard HTML element.
export default class MyComponent extends LightningElement {
// Your code here
}
When you run a module containing an import declaration in lwc js file , the modules it imports are loaded first.
Here: The import statement imports LightningElement from the lwc module.
Extend LightningElement to create a JavaScript class for a Lightning web component. You can’t extend any other class to create a Lightning web component.
The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. For myComponent.js, the class name is MyComponent.
The JavaScript file can contain:
- The component’s public API via public properties and methods annotated with
@api. - Fields
- Event handlers
UI component folders can include other JavaScript files in addition to the main myComponent.js file. However, the code in these files is for the component’s own use and can’t be shared.
Component Configuration File
Every component must have a configuration file. The configuration file defines the metadata values for the component, including supported targets and the design configuration for Lightning App Builder and Experience Builder.
Here’s the simplest configuration file.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
Note : You cannot deploy Lwc component without configuration file, if you do so you will get error.
Cannot find Lightning Component Bundle <component_name>
Top comments (0)