Element in DOM with display none Vs Element not in DOM
Hello, just wondering, what can be a use case of element being in DOM but with display none vs element not being in DOM.
16 Replies
Off the top of my head I can see these reasons.
1. it's easier to just add and remove a display none class if you need to conditionally render an element, compared to removing and re adding it and it's contents to dom.
2. You need the element on the dom but can't show it to user. Hidden fields in form use hidden attribute but most browsers i know implement it with display none anyway. And custom controls like select might use an actual select that's hidden for submitting forms (not sure about this)
3. It might be expensive to add and remove from dom than using display none (not sure about this either because I think rendering should cost resources the most rather than adding to dom)
other cases:
- you want to keep the element where it is, in thr dom, but dont want to remove it because adding it back is a pain in the ass
- other elements depend on it for styling
- it's just easier to hide the element (think like a footer on a <dialog>, but it has no buttons because those weren't added from js, so, you just hide it)
- sometimes, the element will be shown to the user (like custom popovers/title bubbles handled the classical way)
Using display none it removes the elements completely from the DOM, if you where to use opacity 0 it's still in the DOM meaning it still takes the width and height from the contents but you just cant see them.
it removes it from flow but it's still in the DOM
this is a javascript question, not CSS, so "not in the DOM" means quite literally not part of the DOM at all, just in JS memory
Ye mb
yeah, the element is completely removed from the document
as if it didnt exist
an element that has
display: none is in the document, just isnt displayed
it doesn't affect rendering, but can still affect selectors
for example, using :nth-child(even) on rows of a table will select hidden rows as well
which is why you have to do :nth-child(even of :not([hidden])) so it only counts the rows that dont have the hidden attributeJust to add my 2¢:
If it's in the DOM it's in the DOM. That means JS can reach it and do stuff to it (like toggle the
display property to show it!). CSS can access it and do stuff to it (like set the background colour, font size, etc). And assitive technologies have limited access to it:
While–https://developer.mozilla.org/en-US/docs/Web/CSS/display#accessibility If it's not in the DOM it just aint there. No JS can read it. CSS can't style it. Assistive technologies can't get to it. Nothing. If you plan to do anything with it, keep it in the DOM but hide it when not needed. That way you don't have to do a full repaint as the CSS will already be applied and it's already in the right place on the page. It'll just cause a smaller repaint as the page is re-drawn to allow the contents to be visible.display: nonehides content from the accessibility tree, elements that are hidden but are referenced from visible elements'aria-describedbyoraria-labelledbyattributes are exposed to assistive technologies.
yes, and it doesnt have to do a huge relayout calculation because a paragraph was added to the dom
Right, the calculation is already there, the browser just needs to use it. Adding it back to the DOM means the browser needs to re-calculate everything, assign styles, etc. A lot of work for little gain
yup
In addition to what has been said, I can think of one more. Some elements have additional parts. For example, a range input has a slider. You might want to hide the slider completely to implement your own custom one. You can't eliminate the slider from the DOM entirely, because it isn't a separate element. It belongs to a range input. While you could just eliminate the range input entirely and do a full reimplementation, that is extra work, and it's even more work if you want proper accessibility and semantics.
yep I see, thanks for the responses !
The biggest issue I have with display non afaik is that you cant transition from it or to it.
I think we can now, I forgot what we should use but I remember having read something on that
yeah, got it
Kevin Powell
YouTube
We can now transition to and from display: none
Start writing CSS with confidence 👉 https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay
🔗 Links
✅ Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations
✅ Open Web Docs: https://openwebdocs.org/
⌚ Timestamps
00:00 - Introduction
00...
Can't you use discrete animations