Minification performed by bundlers (e.g., `esm.sh`) breaks `getSuperMethod()`

[DmitrySharabin]

getSuperMethod() relies on Function.name (which doesn't survive minification) to walk the prototype chain:

element/src/util/super.js

Lines 93 to 95 in 6e22d72

	export function getSuperMethod (obj, currentMethod) {
	return getSuperMember(obj, currentMethod.name, currentMethod);
	}

The shadow plugin's attachShadow() function is passed to getSuperMethod(), which internally does currentMethod.name to find HTMLElement.prototype.attachShadow:

element/src/plugins/shadow/index.js

Line 19 in 6e22d72

const _attachShadow = getSuperMethod(this, attachShadow);

esm.sh minifies attachShadow → h, so h.name === "h". The lookup for attachShadow up the prototype chain fails, getSuperMethod() returns undefined, and the shadow root is never created:

element/src/plugins/shadow/index.js

Line 23 in 6e22d72

return (this[shadowRoot] = null);

As a result, for example, none of the color elements work via esm.sh.

[LeaVerou]

Does it work with ?keep-names instead of ?dev?

Looks like we need to pass the keepNames esbuild config option ...somehow.

[LeaVerou]

Also, that's some pretty aggressive minification, we should check if other CDNs do this and switch the recommendation to another CDN if it handles it better.

[LeaVerou]

Also, in general minifiers don't rename methods. Can you check which functions exactly broke it?

[LeaVerou]

attachShadow() seems to be one of them. I suspect that we can work around this by making sure all functions we define are part of an object literal, or overwriting fn.name ourselves.