Elements can be undefined in component clean-up when importing the project using `<script>`

Describe the bug ref={...} is used in a few places to attach and detach events when components are created and removed.

There’s possibly a Stencil bug, not too trivial to debug, which causes componentDidUnload to be called before componentDidLoad when importing Shoelace into another Stencil app using <script> tags, and embedding a Shoelace component within a host app component.

Using an alternate import method via npm i @shoelace-style/shoelace@2.0.0-beta.10 and adding import '@shoelace-style/shoelace'; to the index.ts file means the error doesn’t reproduce. Also, removing the wrapping host component with a slot also fixed the issue.

To Reproduce In the host Stencil app we have something like:

<app-card>
  <sl-details open={true}></sl-details>
</app-card>

and Shoelace is installed within the app defining the following in the index.html:

<script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.10/dist/shoelace/shoelace.esm.js"
    ></script>

When running npm start, starting the default Stencil dev server, we see errors that componentDidUnload is calling an unobserve but el is undefined.

Adding breakpoint within didLoad and didUnload you can see that didUnload is called before didLoad.

Expected behavior

Both installation methods for Shoelace perform the same.

Additional context

Likely a Stencil bug but adding here as there are ways to mitigate. The error may go away if switching to disconnectedCallback and this issue may provide motivation to make that change.

[nathanb21]

npm run build then serving from the www folder and I don’t see any errors.

If I set:

devServer: {
    reloadStrategy: null
  }

the error still pops up. Obviously something in the dev server setup, though!

[claviska]

I’m going to close this since I can’t reproduce the problem. A minimal test case will help narrow down what’s happening, so if someone can provide one I’ll reopen this and investigate it further.

If it does turn out to be an upstream issue, the test case will still be helpful so we can forward it to the right project.