Understand Lightning Web Component Bundle

Let’s understand what all the contains in the lightning web component bundle and how it will be different with the Aura Component. The LWC has contained a folder that bundles your component’s files. The folder and the component’s HTML template file, the component’s JavaScript class file, the component’s configuration file, and an optional CSS file must have the same name, including capitalization and underscores.create a lightning web component using the following SFDX command

sfdx force:lightning:component:create --type lwc --componentname mycomponnet --outputdir force-app\main\default\lwc


The LWC component bundler looks like below.


You can’t create a Lightning web component with a name that collides with a custom Aura component in the same namespace. For example, if you have an Aura component named c:progressBar, you can’t create a Lightning web component named c-progress_bar. For example, the markup for the Lightning web component with the folder name mycomponent in the default namespace c is <c-my-component>.Use camel case to name your component myComponent. Camel case component folder names map to kebab-case in markup. In markup, to reference a component with the folder name myComponent, use <c-my-component>.

Component HTML File

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it. Every component requires an HTML file with the root tag . The HTML file follows the naming convention .HTML, such as my_component.html. Create the HTML for a Lightning web component declaratively, within the <template> tag. The HTML template element contains your component’s HTML. For Example, the following HTML tags contain the template and with one property greeting which will be declared in the javascript class.

    Welcome to :{greeting}

Write templates using standard HTML and a few directives that are unique to Lightning Web Components. Directives are special HTML attributes, like if:true and for:each, that give you more power to manipulate the DOM in markup. HTML templates also render data to the DOM. Use simple syntax to declaratively bind a component’s template to data in the component’s JavaScript class.

Component JavaScript File

Every component must have a JavaScript file. If the component renders UI, the JavaScript file defines the HTML element.The JavaScript file follows the naming convention <component>.js, such as myComponent.js. 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.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.


The JavaScript file declares:
• The component’s public API via public properties and methods
• Private properties
• Event handlers etc

Here’s the basic structure of the JavaScript file.

// my_component.js
import { Element } from 'engine';
export default class MyComponent extends Element {
// your properties and methods here

The core module in Lightning Web Components is the engine. The import statement imports Element from the engine module like Wire,API,track from LWC engine

import { Element } from "engine";

The element is a custom wrapper of the standard HTML element. Extend Element to create a JavaScript class for a Lightning web component.

export default class MyComponent extends Element {
// your content here

The export default keywords export a MyComponent class for usage in other components.
The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. In our example, the class name is MyComponent for a c-my_component component, where c is the default namespace.

This is the how the final Mycomponet.Js class looks like

import { LightningElement,api } from 'lwc';
export default class Mycomponent extends LightningElement {
    @api greeting='salesforce LWC';


Component Configuration File

Every component must have a configuration file. The configuration file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder.
The configuration file follows the naming convention <component>.js-meta.xml, such as helloworld.js-meta.xml.
Include the configuration file in your component’s project folder, and push it to your org along with the other component files. Here is a simple configuration file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

This more complex version of the configuration file makes its component available for all Lightning page types but restricts support on record pages only for the account, opportunity, and custom objects. The component has a different set of properties defined for record pages than for app and Homepages like below .

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
      <targetConfig targets="lightning__RecordPage">
          <property name="prop1" type="String" />
      <targetConfig targets="lightning__AppPage, lightning_HomePage">
          <property name="prop2" type="Boolean" />

Component CSS File

A component can include a CSS file. Use standard CSS syntax to style Lightning web components To style a component, create a style sheet in the component bundle with the same name as the component. If the component is called my_component, the style sheet is my_component.css. The style sheet is applied automatically.We no need to use. THIS in the LWC.  Go to the mycomponent LWC folder and create a new file with name mycomponent .css and add the styles. Lightning web components are inherited the lightning design system styles by default.


You can able to add the css like belwo

    background-color: red;

Component SVG Icon

A component can include an SVG resource to use as a custom icon in Lightning App Builder and Community Builder. To include an SVG resource as a custom icon for your component, add it to your component’s folder. It must be named <component>.svg. If the component is called myComponent, the svg is myComponent.svg. You can only have one SVG per folder.

Additional JavaScript Files for Sharing Code

In addition to the JavaScript file that creates the HTML element, a component’s folder can contain other JavaScript files. Use these JavaScript files to share code. These additional JavaScript files must be ES6 modules and must have names that are unique within the component’s folder.

Component Tests

To create Jest tests for a component, create a folder called __tests__ at the top level of the component’s folder. Save the tests inside the __tests__ folder.Jest runs all JavaScript files in the __tests__ directory. Test files must have names that end in “.js”, and we recommend that tests end in “.test.js” or “-test.js”. You can have a single test file with all of your component tests, or you can have multiple files to organize and group related tests. Test files can be placed in sub folders.