remove comment dom node

[tangjinzhou]

Version

3.0.0-beta.14

Reproduction link

https://jsbin.com/vucokaroxo/1/edit?html,output

Steps to reproduce

null and undefined will generate comment dom.

What is expected?

remove it

What is actually happening?

have comment dom

[lawvs]

It might be expected

vuejs/vue#5117 (comment)

v-if is usually used for elements in a relatively stable node structure, rendering it to empty comment tags makes vnode lists diffing more efficient as the lists are more "stable", and it avoids some edge cases when elements are not keyed. In your case it doesn't seem to cause any real issue other than small inspection annoyance, so unfortunately I don't think we would change this behavior.

// https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/vnode.ts#L491-L493
if (child == null || typeof child === 'boolean') {
  // empty placeholder
  return createVNode(Comment)
} else if (isArray(child)) {

[underfin]

@lawvs .That scene is underv-if create comment.This issues really is inconsistent with 2.x.

[yyx990803]

This is intended. It doesn't affect visual output so there's no point to be "consistent" with 2.x.

[underfin]

I track this with 2.x.Find some inconsistent behavior with the blew.It's has a bit of weird.

      // ""
      return this.$createElement("div", [true]);
      // "true"
      return this.$createElement("div", true);

[tangjinzhou]

Too ugly, there will be many comment nodes on the DOM structure.

[yyx990803]

Your user doesn't inspect your DOM.

[umairqazi523]

Your user doesn't inspect your DOM.

Some of them do.

[ariviom]

This issue is long closed now, but comment DOM nodes to affect CSS pseudo-selectors like :first and can cause unexpected behavior and hurdles when styling, even if users aren't inspecting the DOM.

[pangao66]

here I have a case
when the dom is a empty dom, it show - ;
it often used in a table, when the cell is empty , show a hyphen
I can use empty css selectors to select the empty cell

.ant-table-cell{
  &:empty {
    &:after {
      content: '-';
    }
  }
}

but if the dom is empty content but threre are comment dom node by v-if, this empty css selector can not select it
even though there is a :blank css selector will be ok, but now the :blank css css selector is not support by any browser
我有这种场景， 当dom内容是空的时候，需要显示 一个短横线 连字符
尤其在table中， 当空单元格的时候，会经常碰到这种场景， 这时候可以使用 css empty选择器来选中这些空的单元格，但是
如果 单元格中是空内容但是有 v-if导致的注释元素， empty选择器就不能选中这些空单元格了，
现在有个:blank选择器提案，可以选中这种，但目前没有浏览器支持

[silverwind]

I find it rather concerning that vue gives a meaning to DOM comments. Comments can cause various issues:

• Mechanisms like MutationObserver will see them, so will need to perform useless extra iterations.
• For SSR, perservation of HTML comments can not be guaranteed as minifying proxies like Cloudflare's will strip them.

[Trobyss]

Hi !

I asking if this comment doesn't affect DOM size when the navigator downloads the current page. In my case, on a complex page, I have more than 300 empty comments...

'Trob