DJE-053
Warning
Template
Event produced no DOM changes — state outside VDOM root
Error message
Event produced no DOM changes — state may be outside dj-root
An event handler modified state that is rendered outside the <div dj-root> boundary (e.g., in base.html while the VDOM root is in a child template). The VDOM diff found zero differences because it only sees content inside the root. Previously this caused the full HTML fallback to mangle the page; now it is handled gracefully as a no-op.
liveview
silent-failure
template
vdom
Affected versions: >=0.2.0
Solutions
Recommended
Use push_event for UI state outside the VDOM root
For state that controls UI elements in the base template (modals, panels, sidebars), use push_event to send a JS event instead of re-rendering. Set _skip_render = True to avoid a wasted render cycle.
Before (problematic)
@event_handler
def open_panel(self, **kwargs):
self.show_panel = True # Rendered in base.html, outside VDOM root
# VDOM diff sees 0 changes — panel never opens!
After (fixed)
@event_handler
def open_panel(self, **kwargs):
self.push_event("toggle_panel", {"show": True})
self._skip_render = True
# In base.html:
# window.addEventListener("djust:push_event", (e) => {
# if (e.detail.event === "toggle_panel") {
# document.getElementById("panel").hidden = !e.detail.payload.show;
# }
# });
Move the state inside the VDOM root
If possible, move the UI element (panel, modal) into the child template that has dj-root, so the VDOM diff can see it.
Before (problematic)
<!-- base.html (outside VDOM root) -->
{% if show_panel %}
<div id="panel">...</div>
{% endif %}
<!-- child.html (inside VDOM root) -->
<div dj-root>...</div>
After (fixed)
<!-- child.html (everything inside VDOM root) -->
<div dj-root>
{% if show_panel %}
<div id="panel">...</div>
{% endif %}
<!-- rest of content -->
</div>