在带有 lit-element Web 组件的 html 渲染中插入一个节点答案

【问题标题】：Insert a node inside html rendering with lit-element web components在带有 lit-element Web 组件的 html 渲染中插入一个节点
【发布时间】：2020-07-16 09:06:52
【问题描述】：

作为练习，给定一个 html 标记和重复次数 (n)，我想插入 n 次标记节点使用 lit-element 网络组件。我堆在这里：

import {LitElement, html, css} from 'lit-element';

export class WebComponent extends LitElement {

    static get properties() {
        return {
            node: {type: String},
            repetitions: {type: Number}
        }
    };

    constructor() {
        super();
        this.node = "";
        this.repetitions = 0;
    }

    render() {
        var node = document.createElement(this.node);
        return html`
            <div>
                ${for (i = 0; i < this.repetitions; i++) { 
                    // Insert node here
                }}
            </div>
        `;
    };
}

customElements.define('web-component', WebComponent);

这可能吗？怎么样？

【问题讨论】：

标签： javascript lit-element lit-html

【解决方案1】：

是的！

您要查找的可能是“unsafeHTML”，可在“lit-html/directives/unsafe-html”包中找到；

来自 lit-html 网站：

import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';

const markup = '<div>Some HTML to render.</div>';
const template = html`
    Look out, potentially unsafe HTML ahead:
    ${unsafeHTML(markup)}
`;

在您的示例中，可以这样使用：

render() {
    return html`
        <div>
            ${(() => {
                let htmlString = '';
                for (i = 0; i < this.repetitions; i++) { 
                    htmlString += `<${this.node}>Custom Node!</${this.node}>`;
                }
                return html`${unsafeHTML(htmlString)}`;
            })()}
        </div>
    `;
};

如函数名所示，使用时要小心！

同样来自 lit-html 网站：

请注意，这对于任何用户提供的输入是不安全的清理或转义，因为它可能导致跨站点脚本漏洞。

经过测试，它适用于最新版本！
不能告诉你的版本，但这似乎已经存在了一段时间，所以你应该很好！

【讨论】：