fix(menu): menu can be encapsulated in a component

[liamdebeasi]

Issue number: resolves #16304, resolves #20681

---

What is the current behavior?

Split Pane assumes that Menu is a child of the Split Pane. This means that CSS selectors and JS queries only check for children instead of descendants. When a Menu is encapsulated in a component that component can itself show up as an element in the DOM depending on the environment. For example, both Angular and Web components show up as elements in the DOM. This causes the Menu to not work because it is no longer a child of the Split Pane.

What is the new behavior?

• Menu can now be used as a descendant of Split Pane. The following changes make this possible:

1. When the menu is loaded, it queries the ancestor Split Pane. If one is found, it sets isPaneVisible depending on if the split pane is visible or not.
2. Any changes to the split pane visibility state after the menu is loaded will be handled through the ionSplitPaneVisible event.
3. A menu is now considered to be a pane if it is inside of a split pane
4. Related CSS no longer uses ::slotted which only targets children. The CSS was moved into the menu stylesheets. I consider the coupling here to be valuable as menu and split pane are often used together. We also already have style coupling between the two components, so this isn't anything new.

Does this introduce a breaking change?

• Yes
• No

There are no known changes to the public API or public behavior. However, there are two risks here:

1. There is an unknown risk into how this change impacts nested split panes. This isn't an explicitly supported feature, but it technically works in Ionic now. We don't know if anyone is actually implementing this pattern. We'd like to evaluate use cases for nested split panes submitted by the community before we try to account for this functionality in menu and split pane.
2. There may be some specificity changes due to the new CSS. CSS was moved from split pane to menu so it could work with encapsulated components:

:host(.split-pane-visible) ::slotted(.split-pane-side) has a specificity of 0-1-1

:host(.menu-page-visible.menu-pane-side) has a specificity of 0-1-0

There shouldn't be any changes needed to developer code since the selectors are in the Shadow DOM and developer styles are in the Light DOM. However, we aren't able to anticipate every edge case so we'd like to place this in a major release just to be safe.

Other information

Dev build: 7.6.2-dev.11704922151.1fd3369f