Define a Component

A Lightning web component that renders UI must include an HTML file, a JavaScript file, and a metadata configuration file. The files must use the same name so the framework can autowire them. A service component (library) must include a JavaScript file and a metadata configuration file.

• Component Folder
  To create a component, first create a folder that bundles your component’s files.
• Component HTML File
  Every UI component must have an HTML file with the root tag <template>. Service components (libraries) don’t require an HTML file.
• Component JavaScript File
  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.
• 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.
• Component CSS File
  A component can include a CSS file. Use standard CSS syntax to style Lightning web components.
• Component SVG Icon
  A component can include an SVG resource to use as a custom icon in Lightning App Builder and Experience Builder.
• Additional JavaScript Files
  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 structure code in UI components, and share code from service components.
• 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.
• Component Namespaces
  Every component is part of a namespace.

See Also

• Lightning Web Components Video Gallery: Anatomy of an LWC