search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.48k stars 783 forks source link

bug: custom elements build, connectedCallback can be fired before WC is defined #3054

Open liamdebeasi opened 2 years ago

liamdebeasi commented 2 years ago

Prequisites

Stencil Version

2.8.0

Current Behavior

Watchers on state variables are not fired when using the custom elements build. This causes an issue in Ionic v6 where ion-menu is not shown because it depends on ion-split-pane emitting an event that is only fired when its visible state variable is changed.

Expected Behavior

I would expect that watchers fire callbacks in the custom elements build just as they would in the lazy loaded build.

Steps to Reproduce

  1. Clone attached repo.
  2. Run npm install and then npm run start.
  3. Observe that there are ion-split-pane and ion-menu components in the DOM, but the ion-menu component is not visible. (You should not see the "menu content" text)
  4. Open node_modules/@ionic/core/components/ion-split-pane.js
  5. Log the value of this.visible after line 57. (Right before the "// Check if the split-pane is disabled" comment)
  6. Log the value of this.visible after line 84. (Right before the function ends)
  7. Log "watcher fired" inside of the visibleChanged method, which is the callback that is fired when this.visible changes.
  8. Refresh the page in the browser and open the console in dev tools. Observe that this.visible changes from false to true, but the visibleChanged method is never fired.

Code Reproduction URL

https://github.com/liamdebeasi/ce-build-watcher

Additional Information

Ionic GH Issue: https://github.com/ionic-team/ionic-framework/issues/23876

liamdebeasi commented 2 years ago

As per conversations on Slack, the main issue here appears to be that Stencil's connectedCallback can fire before the Web Component is registered with the Custom Elements registry. I can reproduce this on Stencil 2.6.0 as well.

edit: To test with Stencil 2.6.0, install this dev build of @ionic/core: 6.0.0-dev.202109131817.d1763fc

splitinfinities commented 2 years ago

connectedCallback is behaving as expected.

I think one option for better more reliable support is to add a new, later lifecycle event, but there may be performance implications we'd need to research.

willmartian commented 2 years ago

I am unable to reproduce the watcher issue with the above steps when using @ionic/vue@6.0.0-rc.0 (CE build), where node_modules is using @stencil@2.9.0.

@liamdebeasi's test repo is 404, so here is mine. Copied from CodeSandbox in the original FW issue: https://github.com/willmartian/test-ce-watcher