Why does LiveView not support dynamically loading head content?

Phoenix Forum Questions / Help
, ,
1

The LiveView docs have the following note:

If you find yourself needing to dynamically patch other parts of the base layout, such as injecting new scripts or styles into the <head> during live navigation, then a regular, non-live, page navigation should be used instead . Assigning the @page_title updates the document.title directly, and therefore cannot be used to update any other part of the base layout.

I ran into a scenario in a project I’m working on where it seemed like it would be helpful to do that so I started messing around with hooks and was able to get something which works: Load Dynamic Head Files · wittjosiah/dynamic_head_files@959f383 · GitHub.

Given the above warning though, I suspect I might be missing something here, is there something wrong with that?

1 Like
2

don’t know about the warning - I also have hooks updating stuff in head - mostly canonical uri, locale alternatives - and when I get to it full og/meta data (think fb/twitter cards)…

Hooks.Navigated = {
  updated() {
    let value = this.el.innerHTML
    let host = document.getElementById("host").href
    document.getElementById("locale_en").setAttribute('href', `${host}en/${value}`);
    document.getElementById("locale_da").setAttribute('href', `${host}da/${value}`);

    let lang = document.getElementById("current_lang").innerHTML
    document.querySelector("link[rel='canonical']").setAttribute("href", `${host}${lang}/${value}` )
  }
}

it’s mostly not needed - but more in the case that google scrapes with a js enabled browser or something…