.user { flex: 0 0 var(--size); width: var(--size); height: var(--size); background-color: lightgrey; border-radius: 50%;}/* comment component */.comment { --size: 2rem; position: relative; display: flex; gap: 0.5rem; p { color: #9a9a9a; font-family: "Flow Circular", sans-serif; } @container style(--depth: 1) or style(--depth: 2) { --size: 1.5rem; }}.comment__actions { display: flex; gap: 1rem; padding-block: 4px; padding-inline-start: 1rem; a { text-decoration: none; color: #222; font-size: 14px; font-weight: bold; }}.comment__body { background-color: #f0f2f5; padding: 1rem; border-radius: 15px; > * + * { margin-top: 0.5rem; }}@container style(--lines: true) { @container style(--depth: 0) { li:has(ul) > .comment { position: relative; &:before { content: ""; position: absolute; inset-inline-start: 15px; top: calc(var(--size) + 8px); bottom: 0; width: 2px; background: #000; } } } @container style(--depth: 1) { li:has(ul) > .comment { position: relative; &:before { content: ""; position: absolute; inset-inline-start: 12px; top: calc(var(--size) + 8px); bottom: 0; width: 2px; background: #000; } } } @container style(--depth: 1) { li:not(:last-child) { position: relative; &:before { content: ""; position: absolute; inset-inline-start: 15px; top: 0; bottom: 0; width: 2px; background: #000; } } li { position: relative; &:after { content: ""; position: absolute; inset-inline-start: 15px; top: -2px; height: 20px; width: 28px; border-inline-start: 2px solid #000; border-bottom: 2px solid #000; background: transparent; border-end-start-radius: 10px; } } } @container style(--depth: 2) { li { position: relative; &:after { content: ""; position: absolute; inset-inline-start: 12px; top: -2px; height: 20px; width: 28px; border-inline-start: 2px solid #000; border-bottom: 2px solid #000; background: transparent; border-end-start-radius: 10px; } } li:not(:last-child) { &:before { content: ""; position: absolute; inset-inline-start: 12px; top: 0; bottom: 0; width: 2px; background: #000; } } }}@container style(--nested: true) { li.main { // outline: solid 2px red; // outline-offset: 10px; // border-radius: 20px; display: grid; grid-template-columns: 3rem 3rem 1fr; .comment { grid-column: 1/-1; } } ul[depth="1"] { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; > li { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; } } ul[depth="2"] { grid-column: 2 / 3; }}.wrapper { max-width: 700px; margin: 1rem auto; padding: 1rem;}strong { font-weight: bold;}*,*:before,*:after { box-sizing: border-box;}body { font-family: "system-ui"; line-height: 1.3;}.controls { padding: 1rem; background-color: lightgrey; display: flex; gap: 1rem; border-radius: 1rem; margin-bottom: 1rem;}.alert { background-color: color-mix(in hsl, yellow 20%, white); text-align: center; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;}

Please try the demo in the latest Chrome Canary.

Ahmad Shadeed

I like that, looks so cool and steady. This is the way to build such a high performant element in Javascript. I will keep doing it.

Like Reply
- Ahmad Shadeed
  
  I like that, looks so cool and steady. This is the way to build such a high performant element in Javascript. I will keep doing it.
  
  Like Reply
- Ahmad Shadeed
  
  I like that, loo I will keep doing it.
  
  Like Reply
  - Ahmad Shadeed
    
    I like that, looks so cool and steady. This is the way to build such a high performant element in Javascript. I will keep doing it.
    
    Like Reply
  - Ahmad Shadeed
    
    I like that, looks so cool and steady. This is the way to build such a high performant element in Javascript. I will keep doing it.
    
    Like Reply
- Ahmad Shadeed
  
  I like that, looks so cool and steady. This is the way to build such a high performant element in Javascript. I will keep doing it.
  
  Like Reply