Spread Properties on Child Components

Pass a set of properties in an object to a child component using the lwc:spread directive. lwc:spread also enables elements to accept an object that's bound as properties at runtime.

The lwc:spread directive accepts one object.

Use an object with key-value pairs, where the keys are property names.

In your child component, use the properties in your template.

Use the @api decorator to expose your properties to the parent component.

lwc:spread is always applied last, so it overrides any properties that are directly declared in the template. Only one lwc:spread instance can be used on a directive.

In this example, c-child passes name as Lightning Web Components even though the parent component is passing in name="lwc". Ultimately, the child component takes the "lwc" name.

lwc:spread doesn't bind the component to the event handlers defined in the template. For example, you can pass in an onclick handler in the object as the property name.

Here, c-child passes name as LWC. When the c-child element is clicked, spreadClick() replaces name with Lightning Web Components.

Although we don't include onclick in spreadClick(), the element contains onclick as previously assigned to it via the simpleProps object.

Most of the HTML attributes are reflected as properties. For example, class attribute is reflected as className property.

Let's say you pass properties to a child component.

As a result, the spanProps property causes the element to be rendered as <c-child class="spanclass" id="mySpan"></c-child>.

See Also

• HTML Template Directives