if you want to judge a parent and a previous brother, it seems that CSS alone is not easy to implement.

I probably wrote a

implemented to look like this

because I don't know your Dom structure

has little talent and learning, and makes a fool of himself
JSFiddle

the format of each recursive component is about

div.a  //div
    div.b //paddingdiv
        div.c //
        slot //

it should look like this

  <div class="a">
    <div class="b">
      <div class="c"></div>
      <slot />
    </div>
  </div>

then CSS uses .b {border-left:1px solid-sharp000;}

in order to achieve the long root, you need to judge when you create it. If the node has a second sibling node, div.a add a .long

CSS.

.a.long{
  border-left:1px solid -sharp000;
}

.long>.b{
  border-left:none;
}