Suppose you have some UI in a website that should render a list of items. Let's call it FancyList. Usage locations of FancyList provide the list of items, each with a label, and, crucially, any other content that is rendered however the usage location requires.

In UI libraries like React and Svelte, components allow customized rendering using callback functions or slots. In React this might look like:

See the Pen Untitled by tom connors (@tomconnors) on CodePen.

In Svelte we use snippets but the concept is pretty much the same; the caller defines how items are rendered and the FancyList calls that logic.

We don't have a similarly convenient option for rendering child element lists when using web components. You can't pass a function to a web component with just HTML:

<!-- This doesn't solve our problem -->
<fancy-list items="[...]"></fancy-list>

The best option I've found is conceptually pretty simple: instead of passing the items as an attribute of the web component, pass them as children. Structure the children so that the web component can easily pull out the information it needs, and include any customized rendering directly in the DOM.

See the Pen Untitled by tom connors (@tomconnors) on CodePen.

There are some important things to note:

• We read the DOM the caller provided in parseLightDom. You can imagine more complex versions of this function for more complex situations.
• We use a mutation observer to keep track of the children provided by the caller so we can rerender if the items change.
• Instead of directly putting the elements provided by the caller into the WC's shadow DOM, we clone them. This works in more situations than just using innerHTML.
• We don't use <slot> elements because we have a list of items where each can render differently.
• This approach requires more HTML. Your HTML templating should make that manageable and compression should negate any performance concerns.