lit: unsafeHTML not working?

What am I doing wrong?

this._recipe = {
  "directions":"<p>In a microwave safe bowl, combine vinegars, tamarind, honey &amp; saffron. Microwave on high for 1 minute. Stir until tamarind is dissolved. Puree tamarind mixture, cashews, 2/3 c. cilantro, garlic, onions, sugar, pepper &amp; cumin in blender. Pour mixture into a bowl and refrigerate until ready to use.</p><p>Gently stir avocados, tomatoes, onion &amp; ½ tsp. cilantro and salt. Distribute evenly among egg roll wrappers. Use the beaten egg to seal the wrapper. Deep-fry egg rolls in 375 degree oil for 3-4 minutes or until golden brown. Drain on paper towel. Slice egg rolls diagonally across the middle and serve with prepared dipping sauce.</p>",
  "ingredients":"<p>1 Tbsp. white vinegar<br>1 tsp. balsamic vinegar<br>½tsp. tamarind pulp<br>½c. honey<br>1 pinch ground saffron<br>1/8 c. chopped cashews<br>2/3 c. fresh cilantro<br>2 cloves garlic<br>2 green onions<br>1 Tbsp. sugar<br>1 tsp. black pepper<br>1 tsp. ground cumin<br>¼c. olive oil (*this is the end of the sauce)  </p><p>3 large avocados – peeled,pitted,diced<br>2 Tbsp. sun–dried tomatoes in oil – chopped<br>1 Tbsp. minced red onion<br>½tsp. chopped fresh cilantro<br>1 pinch salt<br>1 pkg. egg roll wrappers<br>1 egg – beaten</p>",
  "subtitle":"Cheesecake Factory",
  "title":"AVOCADO EGG ROLLS",
  "md_directions":"In a microwave safe bowl, combine vinegars, tamarind, honey & saffron. Microwave on high for 1 minute. Stir until tamarind is dissolved. Puree tamarind mixture, cashews, 2/3 c. cilantro, garlic, onions, sugar, pepper & cumin in blender. Pour mixture into a bowl and refrigerate until ready to use.\n\nGently stir avocados, tomatoes, onion & ½ tsp. cilantro and salt. Distribute evenly among egg roll wrappers. Use the beaten egg to seal the wrapper. Deep-fry egg rolls in 375 degree oil for 3-4 minutes or until golden brown. Drain on paper towel. Slice egg rolls diagonally across the middle and serve with prepared dipping sauce.",
  "md_ingredients":"1 Tbsp. white vinegar  \n1 tsp. balsamic vinegar  \n½tsp. tamarind pulp  \n½c. honey  \n1 pinch ground saffron  \n1/8 c. chopped cashews  \n2/3 c. fresh cilantro  \n2 cloves garlic  \n2 green onions  \n1 Tbsp. sugar  \n1 tsp. black pepper  \n1 tsp. ground cumin  \n¼c. olive oil (*this is the end of the sauce)  \n\n3 large avocados – peeled,pitted,diced  \n2 Tbsp. sun–dried tomatoes in oil – chopped  \n1 Tbsp. minced red onion  \n½tsp. chopped fresh cilantro  \n1 pinch salt  \n1 pkg. egg roll wrappers  \n1 egg – beaten"
}
render(){
    return html`
      <h2>${this._recipe.title}</h2>
      <h3>${this._recipe.subtitle}</h3>
      <h4>Ingredients</h4>
      ${unsafeHTML(this._recipe.ingredients)}
      <h4>Directions</h4>
      ${unsafeHTML(this._recipe.directions)}
    `
  }

is rendering:

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 32 (6 by maintainers)

Most upvoted comments

If you are using unpkg.com CDN, you can get unsafeHTML in the directives package:

import { html, render } from 'https://unpkg.com/lit-html?module';
import { unsafeHTML } from 'https://unpkg.com/lit-html/directives/unsafe-html.js?module';

james2doyle on May 31, 2019

So I’m using lit-element 2.3.1 and lit-html 1.2.1 and still running into this exact problem. I ran npm dedup to make sure there aren’t any duplicates and still run into it. I’m not sure where to go from here or how to debug.

I can’t share the exact code that I’m using but it is essentially this:

import { html, unsafeCSS } from 'lit-element';
import { unsafeHTML } from 'lit-html/directives/unsafe-html';

export class MyComponent extends LitElement {
  createRenderRoot() {
    return this;
  }

  render() {
    const myNamespace = 'test';
    return html`
      <style>${unsafeCSS('/* some css */')}</style>
      <h1>Hello, world!</h1>
      ${unsafeHTML(`<${myNamespace}-tag>Some text goes in here</${myNamespace}-tag>`)}
    `;
  }
}

There really isn’t anything more complex than that. Everything else is just some text and attribute values that are interpolated. I’m really confused on what the problem is or how to even debug it.

I did pull the unsafeHTML() into a variable and console.log(html${dumbCode}) which output a template rendered right in the template result object in the browser console.

If anyone has any suggestions for where else to go for how to debug it or things to try, please let me know!

willsteinmetzfmr on Aug 6, 2020

Because you can also pass functions as values, so you need a marker to differentiate directives from regular functions.

html`<my-element property=${() => 'some function'}></my-element>`

Without the directive marker, lit-html wouldn’t know if it should execute that function as a directive, or assign it directly to the property property of my-element.

ruphin on Oct 6, 2018