Subscribe on changes!

attribute text on <a> element overwrites text

avatar
VividLemon
Sep 28th 2022

Vue version

v3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9jksOgkAMQK9CupYZo64IGr1HNwNURZ1PZgqaEO7uoMYgGpd9r+lrBzvnRNsQZJAzaXdRTBs0yLlKmG68RlBFWRHCZm9tLtVTVnX7U0ceF3L5PgUzqLWznlOtnDgFa2KpQ5Mk+BIBIUseZGDxlWFGODK7kEnZGHc+iNJquY1O+sZwrSmtrN4uxUKs5rEZeMwFBZ0W3l4D+VhEmI2Oywhb8qknU5En/zc22f0ITtxXdGj2aHro78vPerk=

Steps to reproduce

Make an put stuff in the slot portion add an attribute for text text attribute overwrites slot

What is expected?

Mozilla MDN has no reference to a text attribute. No other html components behave like this. This should be reserved for v-text directive. Nor does plain html behave like this

What is actually happening?

attribute text overwrites slot

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 7.16 GB / 15.93 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.53)
    Internet Explorer: 11.0.22000.120

Any additional comments?

https://codepen.io/jkarczm/pen/zYjRPZr?editors=1000 ~~ html

https://sfc.vuejs.org/#eNp9jksOgkAMQK9CupYZo64IGr1HNwNURZ1PZgqaEO7uoMYgGpd9r+lrBzvnRNsQZJAzaXdRTBs0yLlKmG68RlBFWRHCZm9tLtVTVnX7U0ceF3L5PgUzqLWznlOtnDgFa2KpQ5Mk+BIBIUseZGDxlWFGODK7kEnZGHc+iNJquY1O+sZwrSmtrN4uxUKs5rEZeMwFBZ0W3l4D+VhEmI2Oywhb8qknU5En/zc22f0ITtxXdGj2aHro78vPerk= ~~ vue

avatar
VividLemon
Sep 28th 2022

image redblobgames in the vue land discord also put out this, to help possibly narrow the issue.

avatar
LinusBorg
Sep 28th 2022

This is a weird/funny edge case. The explanation is in the fact that Vue generally prefers to set values through element properties rather than element attributes. And anchor elements do have a textproperty which you can use to get or set the text of an anchor:

https://www.w3schools.com/jsref/prop_anchor_text.asp

if you wanted to set text specifically as an attribute even though achors do not have such an attribute as per the spec, you could do it like this:

https://sfc.vuejs.org/#eNp9jkluwzAMRa8icJNNLBVtV4YbpPfgRonZ1m01gKKdAIHvHjoTMgBZ6r8HPu3gM2c79AQ1NEIh/3uhBUaUxptaaCvWi/AHwsyv1i3NEBZfKTXOH6W2G8xkqXDgZ6y7Co27nIQ5dCEnlir4bH9LilrcYTQGT6Ag1OawTJt+aXoj/IjkUjvXx/z3bdcpuKUyx32ULlDVprB8s6/2/UWbRa53SyVUK06bQqxFhPnVcafjQFwxxZaY+Gnszr0J3rGH6NQcMY4w7gFKGH0q

avatar
VividLemon
Sep 28th 2022

if you wanted to set text specifically as an attribute even though achors do not have such an attribute as per the spec, you could do it like this:

It was actually an accidental passthrough of a prop using v-bind=$props to a dynamic child component that rendered an <a>. Was quite a pain to find, not knowing that the text property existed. Especially considering the mdn doesn't mention text

avatar
LinusBorg
Sep 28th 2022

The linked MDN page documents the HTML element's attributes, and it doesn't have a text attribute

it does have a text property documented here, for its DOM interface: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement

But yeah, agreed, it's an odd one that I also didn't know about until a couple of minutes ago :D

GitHub Track