bug: vue, when adding custom classes, the ion-page critical classes get overridden

[bnachtweh]

Prerequisites

• 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

When I add classes to the <ion-page> element, the ion-page class and the ion-page-invisible class (when in router outlet) are overridden by my own class attribute, which causes the page to be displayed incorrectly.

Expected Behavior

The class attribute is inherited correctly, so both my custom classes and the ionic critical classes are applied to the <div> element that gets rendered by IonPage

Steps to Reproduce

1. Create a new Vue-project with the Tabs template
2. Open Tab1Page.vue
3. Add a class to the ion-page component in the template section: <ion-page class="test-class">

Code Reproduction URL

https://dashboard.ionicframework.com/app/d447a0a8/preview

Ionic Info

Ionic:

Ionic CLI : 6.18.1
Ionic Framework : @ionic/vue 6.0.7

Capacitor:

Capacitor CLI : 3.4.1
@capacitor/android : not installed
@capacitor/core : 3.4.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v12.22.1
npm : 6.14.12
OS : macOS Monterey

Additional Information

Attrs gets processed later, which I think causes the components own class attribute to get overridden. When attrs.class is defined, it should also be applied to the ['class'] section of this component

https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonPage.ts#L18

[bnachtweh]

I have created a Pull Request that may fix this: #24773

[liamdebeasi]

Thanks! Here is a dev build of the fix so you can get unblocked until this fix ships:

npm install @ionic/vue@6.0.8-dev.1644591364.1d3793d @ionic/vue-router@6.0.8-dev.1644591364.1d3793d

[bnachtweh]

Great! Thanks @liamdebeasi

[liamdebeasi]

Thanks for the issue. This has been resolved via #24776, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.