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

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;
#     }
# });

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>

Event produced no DOM changes — state outside VDOM root

Solutions