null/undefined value does not remove xlink:/xml: attribute

[nolanlawson]

Description

Setting an attribute to a value of null or undefined will typically cause a removeAttribute call in LWC. However, this doesn't work for svg/xml namespace attributes (repro).

Template:

<template>
    <div title={prop}></div>
    <label xml:lang={prop}></label>
    <svg>
        <image xlink:title={prop}></image>
    </svg>
</template>

Result:

<div></div>
<label xml:lang="null"></label>
<svg>
  <image xlink:title="null"></image>
</svg>

Expected result:

<div></div>
<label></label>
<svg>
  <image></image>
</svg>

The root cause is these lines of code. Note that svg/xml namespace attributes will never result in a removeAttribute:

lwc/packages/@lwc/engine-core/src/framework/modules/attrs.ts

Lines 39 to 49 in def03ea

	if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
	// Assume xml namespace
	setAttribute(elm, key, cur as string, XML_NAMESPACE);
	} else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
	// Assume xlink namespace
	setAttribute(elm, key, cur as string, XLINK_NAMESPACE);
	} else if (isNull(cur) || isUndefined(cur)) {
	removeAttribute(elm, key);
	} else {
	setAttribute(elm, key, cur as string);
	}

Note that fixing this would be an observable change.

[git2gus]

This issue has been linked to a new work item: W-13217587

[AllanOricil]

@nolanlawson @jmsjtu do you think this can be done now? Is it an easy issue to fix? Looking at it really quickly I see that it is only a matter of adding another branch here, like @nolanlawson said, to call the removeAtrribute method when the prop's value is null || undefined for xml and xlink attributes

[nolanlawson]

This one might be tricky because it would be an observable change, meaning it could break existing components. We're still figuring out how API versioning can work, so maybe it should wait until we've finalized on that.