bug: chrome crashes with "Aw, snap" message

[danielleroux]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.19.2

Current Behavior

Chrome crash after toggle between <slot> elements With DevTools open I can reproduce it 100%, but sometimes it happens also without DevTools open but for this case I dont have a reproducible repo.

Repo: https://github.com/danielleroux/chrome-crash

Problem is related to toggle a <slot>

Component A render function

{this.doTheCrash ? (
          <div>
            Desktop
            <slot></slot>
          </div>
        ) : (
          <comp-b>
            Mobile
            <slot></slot>
          </comp-b>

and the Host class with combination of display: none

component B render function

      <Host
        class={{
          show: false,
        }}
      >
        <slot></slot>
      </Host>

CSS:

:host(:not(.show)) {
  display: none;
}

Expected Behavior

Not to crash the chrome instance

System Info

System: macOS
Chrome: Version 126.0.6478.127 (Official Build) (arm64)

Steps to Reproduce

Checkout repo: https://github.com/danielleroux/chrome-crash

1. npm run start
2. Open Browser with DevTools
3. Resize
4. Click the button (maybe multiple times if not resized correctly)

Code Reproduction URL

https://github.com/danielleroux/chrome-crash

Additional Information

https://github.com/ionic-team/stencil/assets/2144313/fd4157d0-5ca7-4a7d-831f-86a8bd860ba7

[christian-bromann]

I am receiving the following error logs from Chrome:

[0708/095634.168437:WARNING:in_range_cast.h(38)] value -634136515 out of range
[17138:259:0708/095634.044536:ERROR:ax_object.cc(5839)] Check failed: !IsDetached().
[0708/095634.371180:WARNING:in_range_cast.h(38)] value -634136515 out of range
[17107:259:0708/095634.394478:ERROR:CONSOLE(1)] "Protocol Error: the message with wrong session id: {"method":"Target.targetCrashed","params":{"targetId":"FFDB5552839A391A61B4F50DF00432B6","status":"crashed","errorCode":11},"sessionId":"37382A3542E7D2DF0F887AB7D403DA82"}", source: devtools://devtools/bundled/devtools-frontend/front_end/core/protocol_client/protocol_client.js (1)
[17107:259:0708/095634.394988:ERROR:CONSOLE(1)] "Session is unregistering, can't dispatch pending call to Runtime.evaluate", source: devtools://devtools/bundled/devtools-frontend/front_end/core/sdk/sdk.js (1)
[17107:259:0708/095634.395073:ERROR:CONSOLE(1)] "Extension server error: Inspector protocol error: Session is unregistering, can't dispatch pending call to Runtime.evaluate", source: devtools://devtools/bundled/devtools-frontend/front_end/models/extensions/extensions.js (1)

I can't entirely say if this issue is actually more a browser or a Stencil issue but certainly worth investigating more. It seems to not appear in the Canary version. I've ingested it into our backlog but I want to set expectation clear: any investigations from your side is much appreciated. Our team is short staffed and battles constantly with different priorities. It is unlikely we are picking this up anytime soon due the unknown origin and its low impact.

[danielleroux]

Totally fine I managed to workaround this issue by removing the slot

     @State() show: boolean = false;

      <Host
        class={{
          show: this.show,
        }}
      >
        { this.show && <slot></slot> }
      </Host>