Lwc naming convention, LWC follows kebab-case naming convention

Lwc naming convention, js ├──myComponent. Also do not use reserved keywords like ‘slot’, ‘part’, ‘is’. Name must contain only alphanumeric or underscore characters. To create a component, create a folder that bundles your component’s files. Property and Attribute Names Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards. html ├──myComponent. 1) Naming convention of LWC component Bundle This is how the naming convention of the component bundle should be as shown below: Component name Must begin with a lowercase letter. Jan 29, 2023 · To improve the performance, we are recommended to use the best practices in Lightning Web Component. Can Fundamentals of LWC 1) Naming conventions and what goes into an LWC bundle There are two types of naming conventions for LWC: kebab-case and camelCase. Components from Different Namespaces To protect customer data, LWC previously didn’t support the use of components and API modules from different namespaces. css └──myComponent. The LWC files themselves are camelCase with a bundle that looks like this:. Avoid prefixing custom event names with ‘on’ Avoid prefixing custom event names with ‘on’: The event handler names start with on. xml ├──myComponent. Be careful while naming variables. – Consistent Naming Conventions: Use clear and consistent naming conventions for components, files, and variables. We will also talk about example of PascalCase, camelCase or kebab-case and how those naming convention rules works in LWC. Oct 9, 2022 · So, in this blog post, we will talk about what are the things that you need to keep in mind while developing the LWC. – Commenting and Documentation: Document your code thoroughly to make it easier to understand and maintain. md # Mandatory rules, naming conventions, anti-patterns │ ├── evaluations/ Public properties in LWC components become attributes on the component when used in templates Property names starting with "data" conflict with HTML's data attribute naming convention The LWC compiler reserves this namespace to maintain compatibility with HTML standards A component name must follow the naming rules for Lightning components. 4 │ └── salesforce-lwc-coding-rules. Apr 2, 2020 · Lightning Web Components Naming Convention In this post we will talk about Lightning Web Components Naming Convention rules. May 8, 2025 · Apex & LWC Naming Conventions Relevant source files Purpose and Scope This document defines standardized naming conventions for Apex classes, triggers, Lightning Web Components (LWC), and related code assets in Salesforce development. Similar to kebab-case format, each capital letter is represented as hyphen(-) followed by the lowercase version. js-meta. Use spread operator for adding additional attributes in data returned from apex: Many times we have some requirement where we need to add additional attributes to the data returned from apex. md # Comprehensive LWC coding ruleset (1,500+ lines) └── skills/ ├── salesforce-developer/ │ ├── SKILL. The folder and its files must have the same name, including capitalization and underscores. Components Bundles Lightning web component bundles include all below files by default. Use spread operator for adding additional attributes in data returned from apex. svg The folder and its files must Jul 3, 2024 · 3. For example, a JavaScript property named itemName maps to an HTML attribute named item-name. So, adding an additional ‘on’ at the start of the event name would create confusion. The name of the parent folder is the namespace. myComponent ├──myComponent. Name it right Way Using the correct name of the Lightning Web Component bundle is very important as if you miss the right naming convention then you might get into a problem while using composition. Aug 28, 2022 · LWC Naming Conventions Component Folder To create a component, first create a folder that bundles your component’s files. A bundle can be a UI component, which renders UI, or a module, which is a library used to share code. A component folder (bundle) must live in a parent folder that defines the component's namespace. Be careful while naming variables: Do not start a property name with ‘on’, ‘aria’, ‘data’. LWC follows kebab-case naming convention: Be extremely careful while naming Lightning Web Components. Here, we will discuss the most important ones. LWC follows kebab-case naming convention. Code Quality – Follow Coding Standards: Adhere to JavaScript ES6+ standards and Salesforce’s LWC style guide. Your custom components could only use components and modules from the default c namespace and the base components in the lightning namespace.


xav1, 0lxc8, zmgtb, qiwoj, ll0s, 986v, o3aqc, pqxig, h5pp, szqe,