bug: sc-ion-*** classes randomly added to elements, resulting in rendering errors

Start with the linked breakin reproduction and the script that overwrites document.head.attachShadow in public/index.html. Trace how Stencil handles that altered Shadow DOM entry point and verify that the Ionic menu renders without sc-ion-*** classes being added across the element tree.

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I have an IonApp which contains an IonSplitPane and its menu and page. I am running this app on the desktop only. It generally works fine, but sometimes when I load the page the split pane is rendered with classes like:

sc-ion-split-pane-md-h md sc-ion-split-pane-md-s

and when this happens the page fails to render because these classes have a large effect on the CSS styles. These sc-ion-... classes are not applied only on the split pane but across the entire tree. If I reload the page, they go away and everything works fine.

This is documented in a few issues from the forum:

https://forum.ionicframework.com/t/ionic-5-web-app-chrome-css-issues-sc-ion-class-added/213363
https://forum.ionicframework.com/t/sc-ion-class-changes-app-style/213415
https://forum.ionicframework.com/t/ionsplitpane-randomly-fails-to-render/214041

Expected Behavior

I believe these classes are only meant to be included in a mobile android app, but I'm not sure. The CSS classes applied to the elements should be consistent in any case.

Steps to Reproduce

This is a hard one to reproduce as it happens randomly, but in my app I have been able to make it happen somewhat regularly by clearing the browser cache and reloading the page. I can work on putting together a demo app, but I don't have a lot of hope for it given how random the issue is.

I would be very happy to help debug the issue, but I've now spent a lot of time in the code and I can't figure out where these classes could be coming from. Given a nudge toward where they are generated I can add some debugging and try to figure out why they might be being added some of the time.

To reproduce it, you just need to overwrite the native document.head.attachShadow in the browser.

Code Reproduction URL

Here's a sample app that reproduces the issue. All I did was run the Ionic generator for a sidemenu-based app and then add the script here:

https://github.com/aub/breakin/blob/main/public/index.html#L6

Note that when the relevant line of that script is run, the menu doesn't appear and many of the elements get their sc-ion-*** classes applied to them. If you comment out that line, the menu will appear and the classes will be removed.

Ionic Info

Ionic:

Ionic CLI : 6.11.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.6.14

Capacitor:

Capacitor CLI : not installed
@capacitor/core : 2.4.8

Utility:

cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.3.0) : 1.0.0

System:

NodeJS : v16.5.0 (/Users/aubrey/.nvm/versions/node/v16.5.0/bin/node)
npm : 7.19.1
OS : macOS Big Sur

─────────────────────────────────────────────────

 Ionic CLI update available: 6.11.1 → 6.14.1
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

Additional Information

No response