Wait for component to be rendered before running some code.

[PxlCtzn]

tl;dr: Is there a way to tell inline JS to wait for all the components to be rendered before running a piece of code ?

Hi every one,
I'm having trouble to get the following usecase working: if an anchor is set on the current url, display the associated drawer.
Right now, my inline script at the end of my HTML page is sad/angry because the drawer is found but the method .show() is not availbale since the component is not fully rendered. I looked at the SL documentation, the Lit documentation and even dived into the "Event Listeners Breakpoints" of chrome/firefox/firefox dev edition but I did not find a way to do it.

Here is the code I wrote:

  let anchor = window.location.hash
  if (anchor !== "") {
      let drawer = document.querySelector(`sl-drawer#drawer--${anchor.substring(1)}`)
      console.log(drawer)
      if (drawer != null) {
          drawer.show()
      }
  }

Is there a way to tell inline JS to wait for all the components (thus the targetted drawer) to be rendered before trying to call the show() method on it?

PS: I'm not using any framework, just good old plain JS and HTML.

[claviska]

You can always get a reference to the element in the DOM but, as you've discovered, its properties, methods, etc. won't be available until the element is registered. The customElements.whenDefined() function is what you're looking for.

customElements.whenDefined('sl-drawer').then(() => {
  // <sl-drawer> is registered
});
``

To wait for multiple elements, you can use `Promise.all()`:

```js
Promise.all([
  customElements.whenDefined('sl-button'),
  customElements.whenDefined('sl-drawer'),
  // ...
]).then(() => {
  // all elements are registered
});

[mehrlander]

[Edit: I added a comment here but I see now this thread is marked as "closed." It's a new process for me - I've removed it now and I'll try to start a new thread.]

[PxlCtzn]

Thank you so much @claviska .
I miss interpreted the documentation (or red it poorly) since I thought I had to replace 'customElements' by the actual element.
I feel stupid but I will sleep less stupid thanks to you.