How to add additional html content in 0.19

Learn
1

In 0.18 I was able to add additional content (SVG icon definitions) to the HTML body or head; Elm content would be added without disturbing the content I had placed in the HTML file. In 0.19, it seems that Elm (Browser.document) is overwriting not only the HTML body, but also the head and the rest of the document. Can I include HTML content, or do I have to work around with something like a giant string in the Elm code?

Ellie. I placed a SVG definition in the header. If you inspect the output, it has been removed.

https://ellie-app.com/3fRyZymBz57a1

2

Browser.document isn’t overwriting the <head>, it’s just that only <title>, <link>, <style>, <meta>, <script>, <noscript>, and <template> tags are allowed in the <head>. The browser’s HTML parser is ignoring your SVG. The way that Browser.document works now is kind of tricky for this case. Right now at NoRedInk we include stuff like our icon definitions in the body and use Browser.element to embed the Elm app next to it. As we move toward Browser.document and Browser.application we’ll probably convert the icon definitions to Elm code and include them directly in our view. Something else you can do is set your body up like this:

view model =
  { title = "hello"
  , body =
      [ actualView model
      , div [ id "embedded-content" ] []
      ]
  }

And then after the application is running, use some JavaScript to put the <svg> element into document.getElementById('embedded-content')

1 Like
3

Thanks. I was using body before, so either I had not tried head before, or tired it and it did not work. It seems completely rewriting body is the Elm new behavior, and that is also the only place I’m allowed to put svg.

4

I ended up using an external svg file. Required a JS shim for some browser compatibility issue (details and shim were in the IcoMoon download package)

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.