Don't use localName to identify tags, if it's not populated

[djjeck]

Don't use localName to identify tags, if it's not populated.

In browsers that don't populate localName, idom couldn't identify the tag name during patch, and would always think that a different tag was being re-rendered, always recreating DOM nodes rather than reusing them (you can't change the tag name of an existing node).

I verified this issue on Cobalt 9, but this may also affect IE <=8 and other old browsers. https://caniuse.com/?search=localName

Quick links:

• Element.localName https://developer.mozilla.org/en-US/docs/Web/API/Element/localName
• Node.nodeName https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName
• Element.tagName https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

[jridgewell]

nodeName has the incorrect name casing for checks: "foreignObject" !== "FOREIGNOBJECT". You'll need to fix everywhere that uses NodeData.nameOrCtor.

[djjeck]

nodeName has the incorrect name casing for checks: "foreignObject" !== "FOREIGNOBJECT". You'll need to fix everywhere that uses NodeData.nameOrCtor.

I'm sorry, I'm not familiar with the idom implementation. I don't understand what I would need to fix.
If the tag name only comes from this line, isn't it self consistent within the algorithm? I don't see any other reference in the codebase to nodeName, localName, or tagName. Are you talking about wiz checks?
Could we just normalize to uppercase here?

[jridgewell]

nodeName is always capitalized, while localName gives the correct casing:

const d = document.createElement('div');
assert.equal(d.nodeName, 'DIV');
assert.equal(d.localName, 'div');

This is particularly important for SVG, which has case-sensitive element names. Eg, document.createElementNs('http://www.w3.org/2000/svg', 'clippath') will not inherit from SVGClipPathElement, only 'clipPath' will.

In short, everywhere that reads NodeData.nameOrCtor will need to be updated to handle the fact that we can read either a correclty-cased localName or an uppercase nodeName, eg:

• incremental-dom/src/core.ts

  Line 49 in 3be2338

  return nameOrCtor == expectedNameOrCtor && key == expectedKey;

• incremental-dom/src/virtual_elements.ts

  Line 305 in 3be2338

  assertCloseMatchesOpenTag(getData(node).nameOrCtor, nameOrCtor);

• incremental-dom/src/core.ts

  Line 49 in 3be2338

  return nameOrCtor == expectedNameOrCtor && key == expectedKey;

• incremental-dom/src/nodes.ts

  Lines 59 to 63 in 3be2338

  	if (namespace) {
  	el = doc.createElementNS(namespace, nameOrCtor);
  	} else {
  	el = doc.createElement(nameOrCtor);
  	}

• incremental-dom/src/nodes.ts

  Line 26 in 3be2338

  if (getData(parent).nameOrCtor === "foreignObject") {

If you were delete the localName branch in your PR, you'd see every test case fail.