Renders with Props Fed into Lit Template Directive? #3170
-
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>
`; |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
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. |
Beta Was this translation helpful? Give feedback.
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.