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