how to avoid escaping raw html? about hybrids HOT 2 CLOSED

In the documentation of the template engine, you can find a section about values. Because of different reasons expression inside of the element resolves to textContent. If it is the only one expression inside of the element, element.textContent = ... is used, or if it is a concatenation of expression, the engine creates text nodes. Although, you can pass HTML by using innerHTML property of the element, like this:

// Use it with caution, it might open XSS attack
html`<div innerHTML="${htmlCode}"></div>`;

In your example, instead of passing value inside of the <article> element, you should use it when your data resolve in extract function:

function extract(query, content, metadata) {
    let positions = Object.values(metadata).flatMap((term) => Object.values(term).flatMap(t => t.position));
    const html = positions
        .map(([start, len]) => `[…] ${content.substring(start - 50, start + len + 50)} […]`)
        .map(fragment => fragment.replace(new RegExp(`(${query})`, 'i'), `<mark>$1</mark>`));

    return html`<article innerHTML="${html.join('')}"></article`;
}

Because your data is async, you can't pass it directly in your main template. The difference is that <article> element will be rendered when the component receives data, but this is the only way to pass raw html to elements. Still, please be careful, it might open XSS attack.

from hybrids.

amazing! thanks. I thought I went all over the docs but seems like I missed that part about values! 🤦‍♂️

from hybrids.