Stencil: How to iterate over slot children / get ref to slot

[DominicTobias]

Hi, Not an issue so I'll close this, but would appreciate some tips:

<x-columns>
   <x-col width="200" />
<x-columns>

From inside x-columns I would like to add up the user defined widths of columns. I checked lifecycle methods but there seems to be no reference to the slot I can get and then check the props of. This would be trivial with React.children for instance. How would you recommend achieving this? Thanks!

[DominicTobias]

I've done it like this, it's a shame I have to do this after rendering though:

export class Columns {
  ref!: HTMLInputElement;

  componentDidRender() {
    const totalWidth = [].reduce.call(this.ref.children, (n, el) => (n + el.width), 0);
    console.log(totalWidth);
  }

  render() {
    return <div ref={el => this.ref = el as HTMLInputElement}><slot /></div>;
  }
}