Skip to content

Scoped styles on a recursive component creates duplicate data-v- attribute #12159

@Ingramz

Description

@Ingramz

Vue version

3.5.12

Link to minimal reproduction

https://stackblitz.com/edit/github-ippbyu

Steps to reproduce

Use link in reproduction. After starting, check the view-source of resulting HTML that is generated on server side.

This is mainly the same example as in #12136 , with following differences:

  • Content does not include void elements.
  • ContentNode contains <style scoped> to demonstrate the issue.
  • Stackblitz is used instead of playground to get a proper SSR output.

What is expected?

Unique v-data- attributes per element without duplicates.

What is actually happening?

  <div id="app"><div class="content"><!--[--><p data-v-65f4baf5><!--[--><a href="https://vuejs.org/" data-v-65f4baf5 data-v-65f4baf5><!--[--><strong data-v-65f4baf5 data-v-65f4baf5><!--[--><!--[-->Vue.js<!--]--><!--]--></strong><!--]--></a><!--]--></p><!--]--></div></div>

Notice how data-v-65f4baf5 appears twice on same element for <a> and <strong>.

System Info

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions