The Salesforce Developers website will undergo maintenance on May 29, 2024 from 3:00 a.m. UTC to 10:00 a.m. UTC. The maintenance process may affect the availability of our documentation. Please plan accordingly.

Public Properties

To expose a public property, decorate a field with @api. Public properties define the API for a component. Public properties used in a template are reactive. If the value of a public property used in a template changes, the component rerenders.

When a component rerenders, the expressions used in the template are reevaluated and the renderedCallback() lifecycle hook executes.

The @api Decorator

Decorators are a JavaScript language feature. The @api decorator is unique to Lightning Web Components. A field can have only one decorator.

Import the @api decorator from lwc. This code exposes the itemName field as a public property.

The value of itemName displays in the template.

This JavaScript class and HTML template define the c-todo-item component, where c is the namespace. A component that consumes the c-todo-item component can set the itemName property.

Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards. In todoApp.html, the item-name attribute in markup maps to the itemName JavaScript property of c-todo-item.

An owner component that uses a component in its markup can access the component’s public properties via DOM properties. DOM properties are the public fields declared in a class. They’re accessible via the DOM element with dot notation. In this example, the component c-todo-item declares a public field as @api itemName, whose value is accessible via a DOM property on the instance of c-todo-item (the DOM element).

See the CompositionBasics example in the lwc-recipes repository.

See Also