Skip to content

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

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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions