Subscribe on changes!

Since vue 3.4.15 named slots not render with component same name like html tags

avatar
Feb 24th 2024

Vue version

3.4.19

Link to minimal reproduction

https://github.com/nestle49/minimalReproduction

Steps to reproduce

  1. Clone repo
  2. npm i
  3. npm run dev
  4. Change TextArea.vue slot content, he's don't render. Change the name of the component, slot will be rendered

What is expected?

Names slots are visible or warn

What is actually happening?

Named slots don't render

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1
    Memory: 383.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 17.3.1
  npmPackages:
    vue: 3.4.19 => 3.4.19

Any additional comments?

We used named slots and the name of the TextArea.vue component was the same as the textarea html tag. Before version 3.4.15 this worked, after updating to version 3.4.15 the named slots stopped rendering, and we did not receive any console warnings or any errors in the logs at all, as if everything was fine

I understand that this is not a very good practice, but the problem is that we learned about this after receiving broken sites. Could you print a warning to the console that components are using a reserved word? In this case, the html tag

Or at least about slots not being rendered, if possible