Anatomy of a custom storefront LWC and base components
Key Takeaway
A custom storefront LWC uses HTML for structure, JavaScript for logic and CSS for look and animation. Its js-meta.xml file decides what Experience Builder can do with it.
A custom storefront Lightning web component (LWC) is a component you build yourself and add to a B2B or D2C store created with an LWR template, in addition to the Commerce App standard components. You build one to improve the store experience when the standard components don't do what you need. Inside it, you can use Lightning base components as building blocks. Storefront APIs give it commerce data and run commerce processes.
What a Lightning web component is
Lightning web components are custom HTML elements. LWC is built on core Web Components standards, so most of the code you write is standard JavaScript and HTML. The code runs natively in the browser, which keeps the framework lightweight. Custom LWCs are easy to build and perform well in the web browser that hosts the store.
Lightning components come in two programming models: Lightning Web Components and the original Aura Components. The two models can coexist and interoperate on a page. Both appear as Lightning components to admins and end users. When you have a choice, choose LWC.