Cypress selector issue data attribute vs element ID

[rmnrdi]

I'm trying to get an element by data attribute data-el="wmMainMenu". Cypress fails and can't find it because it considers the element hidden (due to an attribute).
https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Visibility

If I get the element by id #TfrmHome_wcMenu3, Cypress can find the element.

Also, if this is true, then this is BS because data-* doesn't always work.

From Cypress docs
"Oftentimes we see users run into problems targeting their elements because:

Your application may use dynamic classes or ID's that change
Your selectors break from development changes to CSS styles or JS behavior

Luckily, it is possible to avoid both of these problems.

Don't target elements based on CSS attributes such as: id, class, tag
Don't target elements that may change their textContent
Add data- attributes to make it easier to target elements"*

Doesn't seem to work with custom data attributes like ours
data-el="ComponentName"

I got a response from ChatGPT saying Cypress treats different selectors differently.
If this is so, can someone explain why and what is the solution to this issue?

Also, if this is true, then this chart is wrong because data-* doesn't always work.