Why doesn't Elm provide head tags for HTML documents?
Elm does not support HTML-document header node, <head>..</head>
.
The question is why not maintain a complete HTML document with suitable features. It would seem that this inclusion would allow efficient use of external resources such as style sheets.
In addition DOCTYPE
, HTML tags evenly tagName attrList elmList
. It is possible that a set of functions appendAttr
and appendElm
can be arranged to provide flexibility for a more complete specification VirtualDom
.
Did I miss something?
source to share
By the time your Elm code is loaded and running, the browser has already read the <head>
HTML pages containing the Elm code, so it's too late to affect the content <head>
.
Elm can be embedded in an element on a page, or run fullscreen (which adds a child to <body>
). An elm can only manipulate content within its container, not outside of it. In particular, all the elements that Elm generates will be contained in the <body>
document, whereas <head>
is sibling <body>
.
It is possible to create HTML elements with any name you like using Html.node "elementName"
. Thus, it is possible to create an item <head>
in Elm. However, the element created this way <head>
will end up inside <body>
, and I expect browsers to ignore it.
source to share
Elm is (mostly) purely functional, meaning it tries to minimize all the side effects that can lead to errors. Since the elm compiler does not know if the CSS file will exist at runtime, it cannot safely say whether or not the CSS file will result in an error. So this is not something that is likely to be included in the future.
So Rtfeldman of NoRedInk has created a repo https://github.com/rtfeldman/elm-css that allows the code to knit a CSS mirror while keeping the security going.
To make your body have a background color with a specific color, this elm code is enough:
[ body
[ backgroundColor (rgb 200 128 64)
, color (hex "CCFFFF")
]
]
and will compile to a file .css
for you.
source to share
Luke's answer is, of course, perfectly correct, but nothing prevents you from updating the document head using javascript via the port. Below is an example of updating the title (tab title).
I knit
port module Ports exposing (..)
port title : String -> Cmd msg
with such update function
update message model =
case message of
SetTitle name ->
(model, Ports.title name)
In Javascript
var elm = Main.fullscreen();
elm.ports.title.subscribe( title => {
document.title = title;
});
source to share