d-if element remains invisible when its CSS class has display:none

[silvath]

Problem

When using \d-if\ to conditionally show an element that also has \display:none\ in its CSS class, the element never becomes visible even when the condition is true.

Why it happens

Drapo's \d-if\ works by removing and re-inserting the element from/into the DOM. When the condition becomes \ rue\ and Drapo inserts the element back, the browser immediately applies the existing CSS rule (\display:none) — making the element invisible despite being in the DOM.

This is confusing because:

• The element is in the DOM (inspectable in DevTools)
• Drapo did evaluate the condition as \ rue\
• But the element appears invisible

Minimal reproduction

CSS:
\\css
.mobile-menu {
display: none; /* problem: fights with d-if /
position: fixed;
inset: 0;
}
.mobile-menu.open { display: flex; } / never applied by Drapo */
\\

HTML:
\\html

\\\

Clicking the button sets \menuOpen\ to \ rue, but the menu stays invisible.

Root cause

The pattern above is designed for JavaScript class toggling (adding/removing .open), not for Drapo's DOM insertion model. Since Drapo never adds the .open\ class, \display:none\ permanently wins.

Fix

Set the element's default display to its intended value and let \d-if\ own visibility entirely:

\\css
.mobile-menu {
display: flex; /* shows when Drapo inserts it /
position: fixed;
inset: 0;
}
/ remove .mobile-menu.open — no longer needed */
\\

Suggested doc addition

A note in the \d-if\ docs:

Important: \d-if\ controls DOM presence (insert/remove), not CSS visibility. If the element's CSS class has \display:none, the element will be invisible even when the condition is \ rue. Ensure the element's default CSS \display\ is the desired visible value (e.g., \lex, \�lock). Do not combine \d-if\ with CSS class-toggle patterns like .class { display:none } .class.open { display:flex }.