Function component: how to use props as slot like custom component?

Hi @tbranyen, Here is my pseudo-code:

function MyComponent(props) {
  return html`
    <div class="modal-dialog">
        <h2 class="modal-title">${props.title}</h2>
        <div class="modal-footer">${props.footer}</div>
    </div>
  `;
}

innerHTML(document.body, html`<${MyComponent} title="Test Modal Dialog" footer="<button class='btn-close>Close</button><button class='btn-cancel' onClick=${() => this.remove()}>" />`);

The footer props is dynamic. Is it possible without using web-component?

[tbranyen]

Hi @dan-do I have not yet added the createSideEffect method. I will put it in today, I think that will suffice for your needs.

[tbranyen]

This regex appears plenty sufficient to chunk out the tags, and then I’m going to use the existing regex to parse out the tagName and attributes.