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.
Decorators are a JavaScript language feature. The @api decorator is unique to Lightning Web Components. A field can have only one decorator.
A property can be your custom property or a property that's inherited from the base HTMLElement interface.
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