refactor(menu): deprecate main html attribute (ionic-team#19237)

Author: manucorporat

core/src/components/menu/menu.tsx

@@ -148,6 +148,17 @@ export class Menu implements ComponentInterface, MenuI {
 
     const el = this.el;
     const parent = el.parentNode as any;
+    if (this.contentId === undefined) {
+      console.warn(`[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
+BEFORE:
+  <ion-menu>...</ion-menu>
+  <div main>...</div>
+
+AFTER:
+  <ion-menu contentId="my-content"></ion-menu>
+  <div id="my-content">...</div>
+`);
+    }
     const content = this.contentId !== undefined
       ? document.getElementById(this.contentId)
       : parent && parent.querySelector && parent.querySelector('[main]');

core/src/components/split-pane/split-pane.tsx

@@ -69,6 +69,24 @@ export class SplitPane implements ComponentInterface {
     }
   }
 
+  componentWillLoad() {
+    if (this.contentId === undefined) {
+      console.warn(`[DEPRECATED][ion-split-pane] Using the [main] attribute is deprecated, please use the "contentId" property instead:
+BEFORE:
+  <ion-split-pane>
+    ...
+    <div main>...</div>
+  </ion-split-pane>
+
+AFTER:
+  <ion-split-pane contentId="main-content">
+    ...
+    <div id="main-content">...</div>
+  </ion-split-pane>
+`);
+    }
+  }
+
   @Watch('disabled')
   @Watch('when')
   protected updateState() {