I have a Lightning Web Component template with a lightning-card in an App Page.

<template> <lightning-card title="parent"></lightning-card> </template> 

I would like to nest more cards into it to simulate the related list look and feel from standard Lightning experience.

<template> <lightning-card title="parent"> <lightning-card title="child></lightning-card> </lightning-card> </template> 

This renders the child without borders, filling the entire width of the parent.

If I add the slds-card_boundary class to the child, it draws a misplaced vertical border fragment above and below the card.

However, if I add the slds-card_boundary class to the article element spawned by the child lightning-card component, the border is correctly drawn around the entire card. Adding a slds-m-around_small to article element also forces a separation between parent and child cards.

What layout concepts am I missing with Lightning Web Components to be able to successfully use lightning-card components?

Playground example https://developer.salesforce.com/docs/component-library/tools/playground/KLHs3GU9

I have a Lightning Web Component template with a lightning-card in an App Page.

<template> <lightning-card title="parent"></lightning-card> </template> 

I would like to nest more cards into it to simulate the related list look and feel from standard Lightning experience.

<template> <lightning-card title="parent"> <lightning-card title="child></lightning-card> </lightning-card> </template> 

This renders the child without borders, filling the entire width of the parent.

If I add the slds-card_boundary class to the child, it draws a misplaced vertical border fragment above and below the card.

However, if I add the slds-card_boundary class to the article element spawned by the child lightning-card component, the border is correctly drawn around the entire card. Adding a slds-m-around_small to article element also forces a separation between parent and child cards.

What layout concepts am I missing with Lightning Web Components to be able to successfully use lightning-card components?

In general, how can lightning-cards be used inside Lightning Web Components to achieve a related list-like appearance?