Currently, hooks only respond to mounted (when element under view is added and LV has finished mounting) or updated (when the DOM has been updated). It seems like you have neither and need state available client side.

One thing I would like to explore is a meta tags solution for LV, especially as it relates to live_link. Effectively, we need to propagate changes server side to the meta tags client side and I don’t think we have a solution yet.

Hi @ndarilek,
Conceptually you are spot on. Package your data into a DOM element that has a JS hook attached, and use it in the hook. Your version may not work as the hook has to be associated with an element that has a socket assign that is changing in order for it to fire, and also note that the hook has direct access to the element it is associated with so you don’t need to look it up with a selector. I’d personally code it along the lines of:

leex

<div id="my-id" data-title="<%= @document.title %>" phx-hook="DocumentShow"></div>

and in the JS:

Hooks.DocumentShow = {
  mounted() {
    this.updateTitle();
  },
  updated() {
     this.updateTitle();
  },
  updateTitle() {
    var title = this.el.dataset.title; // You have access to the element within the hook
    document.title = title;
  }
};