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.
@api decorator from
lwc. This code exposes the
itemName field as a public property.
The value of
itemName displays in the template.
c-todo-item component, where
c is the namespace. A component that consumes the
c-todo-item component can set the
item-name attribute in markup maps to the
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