fix(runtime-dom): handle Symbol attributes #4964
Conversation
Currently, passing a `Symbol` to an attribute throws in `runtime-dom` with: ``` TypeError: Failed to execute 'setAttribute' on 'Element': parameter 2 is a symbol, which cannot be converted to a string. ``` This is because the underlying library used for conversion does not handle Symbol (see jsdom/webidl-conversions#14). This issue cascades into VTU-next as `shallowMount` attempts to write props values as attributes. See vuejs/test-utils#1076 for more context.
| @@ -36,7 +37,12 @@ export function patchAttr( | |||
| if (value == null || (isBoolean && !includeBooleanAttr(value))) { | |||
| el.removeAttribute(key) | |||
| } else { | |||
| el.setAttribute(key, isBoolean ? '' : value) | |||
| // Symbols are explicitly stringified as the underlying library | |||
There was a problem hiding this comment.
This bug only manifests when using shallowMount in Test Utils, which is implemented using transfromVNodeArgs. That function is behind a __DEV__ flag: https://github.com/vuejs/vue-next/blob/b4eb7e3866d7dc722d93a48f4faae1696d4e7023/packages/runtime-core/src/vnode.ts#L481
So we might want to put this check behind the same __DEV__ flag?
|
But why are we passing Symbols as attribute values in the first place? |
|
This was spotted in VTU, as props are rendered as attributes when using shallow mount. We can work around it in VTU, but I was wondering if the cleanest way was not to fix it in core. |
|
Since this is a VTU Either way, let's make a decision so we can unblock the people wanting to update their Ionic version see here for more. |
|
I think we should patch it in VTU then, since this doesn't really make sense in normal applications. |
Currently, passing a
Symbolto an attribute throws inruntime-domwith:This is because the underlying library used for conversion does not handle Symbol (see jsdom/webidl-conversions#14).
This issue cascades into VTU-next as
shallowMountattempts to write props values as attributes.See vuejs/test-utils#1076 for more context.