Analyzer : Inherited properties don't work when extending a local variable

[Lookwe69]

Checklist

• Did you run the analyzer with the --dev flag to get more information?
• Did you create a minimal reproduction in the playground?

Playground: https://custom-elements-manifest.netlify.app/?source=CmltcG9ydCB7IExpdEVsZW1lbnQgfSBmcm9tICdsaXQtZWxlbWVudCc7CgpleHBvcnQgZnVuY3Rpb24gbWl4aW5FbGVtZW50SW50ZXJuYWxzKGJhc2UpIHsKCWFic3RyYWN0IGNsYXNzIFdpdGhFbGVtZW50SW50ZXJuYWxzRWxlbWVudCBleHRlbmRzIGJhc2UgewoJCWdldCBpbnRlcm5hbHMoKSB7CgkJCXJldHVybiB0aGlzLiNpbnRlcm5hbHM7CgkJfQoKCQkjaW50ZXJuYWxzID0gdGhpcy5hdHRhY2hJbnRlcm5hbHMoKTsKCX0KCglyZXR1cm4gV2l0aEVsZW1lbnRJbnRlcm5hbHNFbGVtZW50Owp9CgpleHBvcnQgY2xhc3MgTXlFbGVtZW50IGV4dGVuZHMgbWl4aW5FbGVtZW50SW50ZXJuYWxzKExpdEVsZW1lbnQpIHsKICBteU1ldGhvZCgpe30KfQoKY29uc3QgQmFzZUNsYXNzID0gbWl4aW5FbGVtZW50SW50ZXJuYWxzKExpdEVsZW1lbnQpOwoKZXhwb3J0IGNsYXNzIE15RWxlbWVudFdpdGhvdXRNaXhpblByb3BlcnRpZXMgZXh0ZW5kcyBCYXNlQ2xhc3MgewogIG15TWV0aG9kKCl7fQp9Cg%3D%3D&library=litelement

TLDR: When you do something like:

const BaseClass = mixinFunc(HTMLElement);

class MyElement extends BaseClass { ... }

The inherit properties never get added to the custom elements manifest.
You must use :

class MyElement extends mixinFunc(HTMLElement) { ... }

The problem is, with a lot of mixin, it easier to read with a separate variable.

const BaseClass = mixinTooltipChart(
	mixinGridChart(mixinLegendChart<typeof Chart<LineChartOption, LineChartData>>(Chart)),
);

export class LineChart extends BaseClass { ... }

Expected behavior
It must be possible to create a separate variable before extending the class.

[break-stuff]

@Lookwe69 is there a reason you're not creating a base class and extending from that?

class BaseClass extends mixinFunc(HTMLElement) {}

class MyElement extends BaseClass { ... }

[Lookwe69]

Hi @break-stuff ! There isn't any real reason. IMHO it's more clean to write it with a const instead of class keyword, doesn't need empty {}.

It works with class keyword, is there any technical issue with the const keyword ?

For example, material web component project uses const keyword
https://github.com/material-components/material-web/blob/main/button/internal/button.ts

[break-stuff]

I don't believe the CEM will capture and store the information the same way. By setting it as a variable, it won't be captured as a declaration and be able to be referenced and inherited elsewhere in the CEM.