feat(vue): add custom elements bundle (#23458)

core/src/css/structure.scss

@@ -26,6 +26,10 @@ html:not(.hydrated) body {
   display: none;
 }
 
+html.ion-ce body {
+  display: block;
+}
+
 html.plt-pwa {
   height: 100vh;
 }

core/src/global/ionic-global.ts

@@ -1,4 +1,4 @@
-import { getMode, setMode } from '@stencil/core';
+import { getMode, setMode, setPlatformHelpers } from '@stencil/core';
 
 import { IonicConfig, Mode } from '../interface';
 import { isPlatform, setupPlatforms } from '../utils/platform';
@@ -24,6 +24,18 @@ export const initialize = (userConfig: IonicConfig = {}) => {
   // Setup platforms
   setupPlatforms(win);
 
+  const platformHelpers: any = {};
+  if (userConfig._ael) {
+    platformHelpers.ael = userConfig._ael;
+  }
+  if (userConfig._rel) {
+    platformHelpers.rel = userConfig._rel;
+  }
+  if (userConfig._ce) {
+    platformHelpers.ce = userConfig._ce;
+  }
+  setPlatformHelpers(platformHelpers);
+
   // create the Ionic.config from raw config object (if it exists)
   // and convert Ionic.config into a ConfigApi that has a get() fn
   const configObj = {

core/src/utils/config.ts

@@ -190,6 +190,7 @@ export interface IonicConfig {
   _zoneGate?: (h: () => any) => any;
   _ael?: (el: any, name: string, cb: any, opts: any) => any;
   _rel?: (el: any, name: string, cb: any, opts: any) => any;
+  _ce?: (eventName: string, opts: any) => any;
 }
 
 export const setupConfig = (config: IonicConfig) => {

core/src/utils/platform.ts

@@ -109,13 +109,13 @@ const isElectron = (win: Window): boolean =>
   testUserAgent(win, /electron/i);
 
 const isPWA = (win: Window): boolean =>
-  !!(win.matchMedia('(display-mode: standalone)').matches || (win.navigator as any).standalone);
+  !!((win.matchMedia && win.matchMedia('(display-mode: standalone)').matches) || (win.navigator as any).standalone);
 
 export const testUserAgent = (win: Window, expr: RegExp) =>
   expr.test(win.navigator.userAgent);
 
 const matchMedia = (win: Window, query: string): boolean =>
-  win.matchMedia(query).matches;
+  win.matchMedia && win.matchMedia(query).matches;
 
 const PLATFORMS_MAP = {
   'ipad': isIpad,