Booleanish behaviour of attributes like crossorigin not supported

[farnabaz]

Version

v2.9.2

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-hm0ch

Steps to reproduce

When creating a new link with crossorigin value, and setting its value to true, attribute renders with value.
View page source and search for crossorigin

What is expected ?

Boolean attributes should not have value

<link crossorigin>

What is actually happening?

Boolean attributes renders with value

<link crossorigin="true">

_{This bug report is available on Nuxt community (#c9719)}

[pimlie]

Thanks for the report. Have moved this to the vue-meta repo because its a vue-meta issue.

Vue-meta maintains a list of attributes which are boolean attributes. Seems that crossorigin is not listed because its not really a boolean attribute like the others, its just that if you omit an explicit value it fallsback to a default one.

Dont think we can add crossorigin just to the list, because that list is for explicit boolean attributes only. Maybe we need a second list of booleanish attributes.

[abronin]

You can always use empty string as a value for an attribute you want to be rendered as a booleanish. This link {rel: 'preconnect', crossorigin: ''} will be rendered as {<link ref="preconnect" crossorigin>}.

It may be more a hack than a feature till it is not mentioned in the documentation. Should I fix this by editing documentation? What do you think?

[luksak]

This link {rel: 'preconnect', crossorigin: ''} will be rendered as <link ref="preconnect" crossorigin>}

That is not correct. This is being output:

<link rel="preconnect" crossorigin="">

Sadly that hasn't the desired effect.

[pimlie]

@luksak Unless this MDN page is incorrect, using crossorigin="" is the same as crossorigin or crossorigin="anonymous". So what exactly do you mean it doesnt has the desired effect?

[luksak]

@pimlie Ah ok. Thanks for clarifying.