How can I get special characters using elm-html module?

Question

Disclaimer: I\'m brand new to Elm

I\'m fiddling around with the online Elm editor and I\'ve run into an issue. I can\'t find a way to get certain special charac

Answer 1

Why this is (intentionally) not so easy

The "makers" of Elm are understandably reluctant to give us a way to insert "special" characters into HTML text. Two main reasons:

1. This would open a "text injection" hole where a malicious user could insert any HTML tags, even JavaScript code, into a Web page. Imagine if you could do that in a forum site like Stack Overflow: you could trick anyone reading your contribution into executing code of your choosing in their browser.
2. Elm works hard to produce optimal DOM updates. This only works with the content of tags that Elm is aware of, not with text that happens to contain tags. When people insert text containing HTML tags in an Elm program, there end up being parts of the DOM that can't be optimized.

How it's possible anyway

That said, the Elm user community has found a loophole that affords a workaround. For the reasons above, it's not recommended, especially not if your text is non-constant, i.e. comes from a source outside your program. Still, people will be wanting to do this anyway so I'm going to document it to save others the trouble I had digging everything up and getting it working:

1. If you don't already have it,
   import Json.Encode exposing (string)
   This is in package elm-lang/core so it should already be in your dependencies.
2. Similarly,
   import Html.Attributes exposing (property)
3. Finally, create a tag having a property "innerHTML" and a JSON-Value representation of your text, e.g.:
   span [ property "innerHTML" (string " ") ] []