Allow HTML in content

[Vincent Agnano]

In some case a text contains HTML.
It would be unsafe when it comes from a user as it would permit XSS injection.
However when the text comes from a safe place, it would be handy to allow HTML content.

However I'm not aware of a way to declare text as safe html.

The solution I found is to create a component to include as child:

class SafeHTML extends Component {
  connected() {
    this.document.innerHTML = this.document.host.textContent
  }
}
customElement.define('safe-html', SafeHTML)

and then use it in my component:

class MyStuff extends Component {
  init() {
    this.state = { myText: "Hey <strong>Joe</strong>" }
  }
  vdom() {
    return ({ state }) => h('p', {}, [
      "reply: ",
      h('safe-html', {}, state.myText)
    ])
  }
}