Spread Properties on Child Components
Pass a set of properties in an object to a child component using the
lwc:spread also enables elements to accept an object that's bound as properties at runtime.
The lwc-recipes repo has an
apiSpread component that demonstrates 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.
@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,
Lightning Web Components even though the parent component is passing in
name="lwc". Ultimately, the child component takes the
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.
LWC. When the c-child element is clicked,
Lightning Web Components.
Although we don't include
spreadClick(), the element contains
onclick as previously assigned to it via the
Most of the HTML attributes are reflected as properties. For example,
class attribute is reflected as
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>.