unsafeHTML not working as expected

[mbouclas]

Given the following code, i would expect the result to be a rendered version of the input string

import { unsafeHTML } from "lit-html/directives/unsafe-html";

html` ${unsafeHTML(`<em>hi</em> you`)}`

Instead, what i get is [object Object]. A console.log( ${unsafeHTML(hi you)}) returns

values: ['<em>hi</em> you']
_$litDirective$: class e
[[Prototype]]: Object

values contains the original string and not a rendered result.
Working on a web component using lit element if that matters.

[aomarks]

html template results needed to be passed to the Lit render function or returned from the LitElement render method in order to be actually rendered to the DOM. Are you trying to render the result in some other way?

Here's an example of unsafeHTML working, maybe you could modify it to debug or reproduce your problem? https://lit.dev/playground/#sample=examples/directive-unsafe-html

[mbouclas]

So, it turns out the problem was that i was importing html from lit-element. Turns out, it has to be imported from lit instead.

[justinfagnani]

That should be the same template tag function regardless of which package you import it from: both lit and lit-element re-export html from lit-html. One case where it would matter is if the lit-element you're importing from is at version 2.x. lit and it's sibling packages use lit-element 3.x. You can check what versions you have installed with npm ls or with the window.litElementVersions global variable.

[mbouclas]

Yeap, it was the version. Updated to 3.0.1 and everything works as expected. Previous version was 2.5.1

Thanks for that