Split-pane uses invalid attribute for identifying main.

[jthoms1]

You are required to add main boolean attribute to an HTML element to denote the target for ion-split-pane. The issue is that main is not a valid attribute for HTML elements. So if you are writing JSX and validating with Typescript then an error will be thrown because the boolean attribute does not exist in the type.

Currently this is an issue for React + Typescript, but I see this potentially be an issue for more people in the future. My suggestion would be that we provide an alternate way of defining the main panel.

---

Based on current discussions with @manucorporat I believe we came to the conclusion that we should continue to support the global html attributes for @ionic/angular projects but we should create classes for @ionic/vue and @ionic/react projects.

<div padding> would be come <div class="ion-padding">

Further team discussion is needed.

[manucorporat]

This is not only about split-pane, there is a whole list of possible attributes:
https://github.com/ionic-team/ionic/blob/6776e65c9cae212a0bb2d7477b3a09beb2dfcad0/core/src/interface.d.ts#L59-L82

[jthoms1]

Dang, I forgot about all of those. Currently React uses a global JSX definition that we can probably extend, but if they start using locally scoped JSX namespaces it will not longer be available to us.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html

[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.