CODEWITHSUNDEEP
domweb-componentstenciljscustom-events
vitto
vitto

Reputation: 19476

How to define a web component well formatted custom event?

I'm trying to define a coding standard for my company's design system's web components but I'm not sure what would be the best choice.

There are people which is strongly against the use of uppercase in event names, due to the fact that would not be compatible with DOM Level 2, but the DOM Level 3 is defined by almost 20 years, so I don't understand the problem.

This would be my choice but I'm not sure if DOM Level 2 is so important:

Event name Compatibility Readability Code handling Best candidate
accordiontimermouseenteractive DOM Level 2 Worse Best
accordiontimer:mouseenteractive DOM Level 2 Bad Bad
accordionTimerMouseEnterActive DOM Level 3 Good Best ✅
accordionTimer:MouseEnter:Active DOM Level 3 Best Worse

For code handling I just mean how the event is easy to be copied and pasted with the clipboard.

I'm using StenciJS to create the suite, so this would be my TypeScript scenary:

@Event({ eventName: 'accordionTimerMouseEnterActive' }) mouseEnterActiveEvent: EventEmitter

On DOM Level 2/3 I didn't found any compatibility informations, so what would be the better choice, is DOM Level 2 so important in 2023?

Upvotes: 0

Views: 35

Answers (0)

Related Questions