在html呈现中插入一个节点，其中包含发光元素web组件。

Question

作为练习，给出html标记和一些重复(n)，我想插入n倍标记节点使用点燃元素web组件。我被堆放在这里：

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);

这个是可能的吗？多么?

Answer 1

是的，就是这样！

您要寻找的可能是“未安全的html”，可以在包‘lit/directives/不安全-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站点：

注意，这是不安全的使用任何用户提供的输入，但没有经过消毒或转义，因为它可能导致跨站点脚本漏洞。

测试了它，它与最新的版本一起工作！

不能告诉你的版本，但这似乎已经有一段时间了，所以你应该是好的！

Answer 2

https://lit.dev/docs/templates/directives/#unsafehtml

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

  [...]
  this.myhtml = "one<br />two"
  [...]

  render() {
    return html`
          <div>
            ${unsafeHTML(this.myhtml)}
          </div>
    `
  }