在 html 内插入一个节点，使用 lit-element web 组件进行渲染

Question

As an exercise, given an html tag and a number of repetitions ( n ), I want to insert n times the tag node using a lit-element web component. I'm stacked here:

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

Is this possible? How?

Answer 1

Yes, it is!

What you're looking for is probably 'unsafeHTML', avaliable in the package 'lit-html/directives/unsafe-html';

From the lit-html site:

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

In your example it would could be used like this:

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>
    `;
};

As the function name reads, be careful while using it!

Also from the lit-html site:

Note, this is unsafe to use with any user-provided input that hasn't been sanitized or escaped, as it may lead to cross-site-scripting vulnerabilities.

Tested it and it works with latest release!
Can't tell your version but this seems to be around for a while now so you should be good!

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>
    `
  }