feat(custom-elements): add experimental custom elements build

[adamdbradley]

@ionic/core/components package will be included in the npm distribution.

[liamdebeasi]

Any chance you can create a dev build so we can do some tests in conference apps before we merge?

[liamdebeasi]

Any chance there's a stable release of ionicons we can use?

[adamdbradley]

Yeah thinking we can release 5.5.0 once we know the dev build is good to go

[vicb]

Is there anything else to do beside calling initialize() and registering the components ?

I am trying this feature of 5.6 and have a few issues:
-The body is initially hidden[1],

• The modals, alert, ... would not render - I am using the modalController from @ionic/core/components and registering ion-modal (IonModal) + ion-backdrop,
• I have a <ion-select> that is not rendering (supposed to be a popover)

[1] because of

html:not(.hydrated) body {
    display: none;
}

[liamdebeasi]

Can you file an issue with a reproduction regarding the overlays not working?

For the css, you can add the following globally for now:

html:not(.hydrated) body {
    display: block !important;
}

We did not remove that for now since it would impact non-custom element build versions of Ionic.

[vicb]

Thanks for your super fast answer.

I have added the class to my html for now.

I'll dig a little bit in the overlay issue trying to find the root cause and I'll create an issue with a repro.

[vicb]

It seems like the pb could be

const componentOnReady = (el, callback) => {
  if (el.componentOnReady) {
    el.componentOnReady().then(callback);
  }
  else {
    callback();
  }
};

which is called from createOverlay():

const createOverlay = (tagName, opts) => {
  /* tslint:disable-next-line */
  if (typeof customElements !== 'undefined') {
    return customElements.whenDefined(tagName).then(() => {
      const element = document.createElement(tagName);
      element.classList.add('overlay-hidden');
      // convert the passed in overlay options into props
      // that get passed down into the new overlay
      Object.assign(element, opts);
      // append the overlay element to the document body
      getAppRoot(document).appendChild(element);
      return new Promise(resolve => componentOnReady(element, resolve));
    });
  }
  return Promise.resolve();
};

because ionModal.componentOnReady is undefined at this point the callback gets called with no arg so await modalController.create(...) returns undefined and you can not call modal.present() (modal being undefined).

Hand picking the component and calling its present() method works fine.

Sorry for hijacking this PR, I'll put my findings together with a repro in a bug report

Edit: see bug #23029