fix: Fix order of ShadowRootUI hooks calling

[ookkoouu]

According to #333, it seems onMount should call after the UI is mounted, and onRemove should call before the UI is removed, but ShadowRootUI was not.

It's inconvenient that shadowHost is not connected when mounting UI.

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	01903be
🔍 Latest deploy log	https://app.netlify.com/sites/creative-fairy-df92c4/deploys/65d0c27d9ad5a100084205c5
😎 Deploy Preview	https://deploy-preview-459--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: 2 lines in your changes are missing coverage. Please review.

Comparison is base (c275ccf) 85.45% compared to head (01903be) 85.38%.
Report is 1 commits behind head on main.

Files	Patch %	Lines
src/client/content-scripts/ui/index.ts	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #459      +/-   ##
==========================================
- Coverage   85.45%   85.38%   -0.08%     
==========================================
  Files         106      106              
  Lines        8067     8066       -1     
  Branches      783      783              
==========================================
- Hits         6894     6887       -7     
- Misses       1160     1166       +6     
  Partials       13       13              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[aklinker1]

It's inconvenient that shadowHost is not connected when mounting UI.

@ookkoouu What's your use case?

For the shadow root, having the order flipped for onMount and onRemoved (like it is today) makes more sense to me. Don't you want your UI mounted and ready to go before showing it on the UI? Same with onRemove, don't you want to remove the shadow root from the UI before unmounting and destroying your UI?

[aklinker1]

onRemove is now called before the UI is removed from the DOM, previously it was called after the UI was removed

Oh I see I said that... Hmm

[ookkoouu]

I wanted to mount the UI on multiple elements like a list. To know from onMount where each UI will be inserted, the shadowHost needs to be connected to the DOM already.

ex: Mount the UI on a Youtube live chat icon with wrapper, want to get its username

createShadowRootMultiUI(ctx, {
  name: "wxt-inline",
  position: "inline",
  append: "last",
  anchor: ".chat-icons",
  onMount(container, shadowRoot, shadowHost) {
    const userName = shadowHost
      .closest(".chat-container")
      ?.querySelector(".chat-username")
      ?.textContent;
    if (!userName) {
      return;
    }

    const root = createRoot(container);
    root.render(<App userName={userName} />);
    return root;
  },
});

Rendering artifacts is not so important IMO.

[aklinker1]

Ok, this should be fine.

[aklinker1]

Released in v0.16.9