Set Properties on Child Components

To communicate down the containment hierarchy, an owner can set a property on a child component. An attribute in HTML turns into a property assignment in JavaScript.

Let’s look at how the owner, c-todo-app, sets public properties on the two instances of c-todo-item.

Look at todoItem.js. The @api decorator exposes the itemName field as a public property.

To set the public itemName property, todoApp.html sets the item-name attribute on each c-todo-item component.

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.

This example uses static values of Milk and Bread, but a real-world component would typically use a for:each iteration over a collection computed in the owner’s JavaScript file, todoApp.js.

For a slightly more complicated example, see the composition basics recipe in the lwc-recipes repo.

You can also play with similar code in a playground at lwc.dev, which is the Lightning Web Components: Open Source developer site.

See Also