Renders with Props Fed into Lit Template Directive?

[waldronmatt]

Is it possible to feed the Template Directive a render method that contains variables and props? So far I've been able to do this with static HTML and slots only.

The closest thing I could find is Justin's Stampino library https://github.com/justinfagnani/stampino. Does anyone think this kind of library could be eventually incorporated into Lit?

After building out my company's component library, I've run into use cases where we'd want to reuse the same shell component nested inside different parent components, but customize them with different markup and named slots. And interpolating props and other Lit directives and such would be icing on the cake.

basic-component.ts

const templateEl = document.querySelector('template#myContent') as HTMLTemplateElement;

render() {
  return html`
    ${templateContent(templateEl)}
  `;
}

another-component.ts

render() {
  return html`
    <template id="myContent"
      <p prop=${this.prop}></p>
    </template>
  `;

[sorvell]

There are a lot of possibilities here based on what you'd like to do. Stampino is a good option for a lot of use cases. Building it directly into Lit is something we're considering but there are no immediately plans to do so.

Lit can render lots of values including TemplateResults and nodes themselves. And of course, Shadow DOM can render content via slots.

Here's an example showing each of these.

Note that Lit currently doesn't support expressions directly inside template elements.

[justinfagnani]

It's a very interesting area. One of the things we'd need to figure out with <template> elements is scopes and update models for bindings - because you're sharing control over DOM between two elements.

Typically you'll want some bindings to be satisfied by the container providing the template, and the rest to be satisfied by the host accepting the template. With functions this breaks down into parameters and closed over variables. With template elements, it's less clear. We might have to invent a parameters concept.

Then you'll want to update the DOM when either host-provided or container-provided values change. Lots to work out.