On Tue, Nov 22, 2016 at 11:49 PM, Qiming Weng <qim.w...@gmail.com> wrote:

> Evan has suggested using the VirtualDom, but something like
>
> whatever =
>   div [] [ node "style" [] [ text ".cats { ... }" ] ]
>
> Simply creates a node representation in memory, but doesn't actually
> insert it into the DOM.
>

This is weird. Can you give us more information about your setup? The
following code works just fine for me in http://elm-lang.org/try

import Html exposing (text, node, div)

main =
  div []
    [ node "style" [] [ text "* {color: red;}"]
    , text "Hello, World!"
    ]


This solution is also documented in the Elm FAQ:
http://faq.elm-community.org/#how-can-i-load-css-or-other-resources-in-elm-reactor

However, I would recommend against it as it has performance issues.

To my knowledge, the best way to do CSS dynamically is to generate the
compiled string form of the CSS and mount it on a head tag with the use of
ports.
You can use rtfeldman/elm-css to compile the CSS and a little bit of JS on
the port handler.


      var elmcss =document.createElement('style');
      elmcss.type='text/css';
      elmcss.id="elmcss"
      document.getElementsByTagName('head')[0].appendChild(elmcss);

      app.ports.updateCss.subscribe(function(css) {
        if ( elmcss.textContent != css) {
          elmcss.textContent = css;
        }
      });




-- 
There is NO FATE, we are the creators.
blog: http://damoc.ro/

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to