fix(cxl-ui): [cxl-marketing-nav] display descriptions on sub-menus

[anoblet]

https://app.clickup.com/t/861m7gmrz

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js	65.6 KB (+0.06% 🔺)

[anoblet]

opened-changed only fires once when the top level menu is opened. The submenu items have yet to be rendered, and aren't able to be modified.

MutationObserver watches for any add/removal of nodes with the optional ability to observe attributes as well. You can also specify subTree: true for observing deep changes.

This use case of MutationObserver is pretty efficient. Since it only registers on firstUpdated and only watches the add/removal direct descendants of document.body, it should only fire on menu clicks.

[pawelkmpt]

@lkraav can we merge it?

[lkraav]

@lkraav can we merge it?

I don't know, haven't been able to evaluate whether this is best available practice. Asking on Vaadin Discord would help convince.

[anoblet]

@lkraav https://discord.com/channels/732335336448852018/1064939525731790969/1064939525731790969

[pawelkmpt]

I see someone on Discord suggested different solution. Will you use it @anoblet ?

[anoblet]

@pawelkmpt I have updated the PR to use the technique from Vaadin Discord.