javascript - 顧客が JS で作成した要素を stenciljs の webcomponent のレンダリングに戻すにはどうすればよいですか

Question

要素を作成するためのカスタム メソッドを持つコンポーネントがあります。js を使用してカスタム要素を作成し、配列を返します。この配列または要素/要素を使用して、レンダー要素として返す方法を教えてください。

注: createCustomElement には動的な実装があります

import { Component, Element, Prop, State } from '@stencil/core'


@Component({
  tag: 'common-listing',
  shadow: true,
})
export class CommonListing {
  @Element() el: HTMLElement

  @Prop() columns: any

  @State() list: Array<any> = []

  @State() click: string = 'CLic'

  async componentWillLoad() {
    const res = await fetch('http://localhost:3000/users')
    const data = await res.json()
    this.list = data
  }
  createCustomElement(l: any) {
    let div = document.createElement('div')
    let span = document.createElement('span')
    span.innerText = l['user_id']
    div.appendChild(span)
  }
  render() {
    let content = this.list.map(l => this.createCustomElement(l))
    return content
  }
}