HTML comment prevents scoped CSS

[p3k]

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#__PROD__eNp9UsFOwzAM/ZWQS0FaW43BpZRJbBoSHACxHSuh0nprRppESVqGpv07TrqOIdBOcZ7fc57tbOmdUlHbAE1oaqFWPLcwzgQh6b2UpOC5MbfBUsogRjSNjyh4NYVmyhIDtlGIsFpJbYkTLrWsSRDFGLvqwY0Td/S91H5xIKaQCkpEInyCJCWAOo/ec31Bts5DIbnUCdFQon7nSzgZ8umAWhSLJVtFayMF2veKjBayVoyDflaWSWEymnS1XC7nXH4+eszqBgY9XlRQfPyDr83GYRl90WBAt5DRQ87megW2S8/mT7DB+JCsZdlwZJ9IvoKRvHEeO9qkESXaPuJ5tw9+pkysFma2sSBM35Qz6pg7z88oTnl6ovUfu6PoyutwojjF/YL+rv8sDMmiYgaXUNcgLFEaWjwNsVW/ODKdz0kYdoKStT7AsBr2Pwd3GYwnuU7jatjR4o736yuhj7cWtOsNjYyi62h4SXffuV7azA==

Steps to reproduce

The output in the playground URL shows a black heading “Bar”, although there is a :deep(.bar) selector that should render it red.

If the HTML comment in line 2 of Foo.vue is removed, the black heading turns red.

What is expected?

The heading “Bar” should be displayed in red color without removing the HTML comment.

What is actually happening?

The difference in the HTML output is the missing data-v-7ba5bd90 attribute when the HTML comment remains:

With HTML comment;
<div class="foo">

Without HTML comment:
<div data-v-7ba5bd90 class="foo">

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (4) x64 Intel(R) Core(TM) i5-4440S CPU @ 2.80GHz
    Memory: 7.95 GB / 15.50 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 20.9.0 - ~/.local/share/nvm/v20.9.0/bin/node
    Yarn: 1.22.21 - ~/.local/share/nvm/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.local/share/nvm/v20.9.0/bin/npm
  Browsers:
    Chrome: 130.0.6723.91
    Chromium: 130.0.6723.69

Any additional comments?

Could be related to https://github.com/vuejs/core/issues/9591…?

[edison1105]

duplicate of #9591
see #9591 (comment)

[p3k]

@edison1105 Even if the HTML comment should be replaced in production, it seems strange that it would prevent the data attribute needed for the scoped CSS to be added to the target element. Is there a reason for this, is this explained somewhere?