问题
Question is pretty much self-explanatory.
Example:
function generateTemplate(tag) {
return html`
<${tag}
.some-prop=${1}
>
...
</${tag}>
`;
}
回答1:
There isn't one way to do specifically what you mention here, but there are two approaches that can get you somewhat close:
- Conditional rendering
const template = tag => {
if (tag === 'custom-component') {
return html`<custom-component></custom-component>`;
} else if (tag === 'other-component') {
return html`...`;
} else {
return html`<some-default></some-default>`;
}
};
- Using the unsafe html directive
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
const template = unsafeContent => {
// bear in mind that this should only be done after sanitizing the content
return html`${unsafeHTML(unsafeContent)}`;
};
template('<my-component>Some content</my-component>');
来源:https://stackoverflow.com/questions/59259400/is-there-a-way-to-make-tags-in-lit-html-templates-dynamic