Slots

reactolith provides a simple slot mechanism: any direct child of a custom component carrying a slot attribute is captured as a slot prop with the slot's inner content (not the wrapping element).

<my-component> <template slot="header"><h1>My header content</h1></template> <div slot="footer">My footer content</div> </my-component>

function MyComponent({ header, footer, children }) { return ( <article> <header>{header}</header> <div>{children}</div> <footer>{footer}</footer> </article> ); }

Use <template slot="…"> when you don't want the wrapping element to appear in the rendered DOM.