Using createShadowRootUi

[sgcullen]

Hi Team,

Thanks for putting the work in to create wxt - I'm really enjoying the improved DX so far.

May I ask for a little clarity on usage of createShadowRootUi and specifically the onMount callback?

I'm writing a content script in Svelte that will append multiple mini svelte apps (ideally isolated in the Shadow DOM). I've got the target elements where each Svelte app will live and I'm trying to use the createShadowRootUi within a loop to mount them.

onMount takes 3 args;

uiContainer: HTMLElement, shadow: ShadowRoot, shadowHost: HTMLElement

It's late and perhaps I'm just getting confused but what should I be passing in here - the current example under getting started only passes in the uiContainer and I think I'm getting my terminology mixed up here but I'm struggling to have the apps appended to the correct location in the DOM and the end result is they end up appended at the end of the DOM.

EDIT - here's my current code and I'd like to append each Svelte app to the correct target element:

 Array.from(searchResultPageElements).forEach(async (item, i) => {
   
    const targetContainer = item.getElementsByClassName(
      'card-container',
    )[0];
    const ID = item.getAttribute('data-attribute');
   
    if (!targetContainer) return;

    const ui = await createShadowRootUi(ctx, {
      name: 'search-result-ui-' + ID + '-' + i,
      position: 'inline',
      onMount: (targetContainer) => {
        // Create the Svelte app inside the UI container
        const app = new App({
          target: targetContainer,
          props: {
            name: ID!,
          },
        });

        searchResultsMap.set(ID!, app);
        console.log(searchResultsMap, 'the search results map');
        console.log(app);
        return app;
      },
      onRemove: (app) => {
        // Destroy the app when the UI is removed
        app?.$destroy();
      },
    });
    // 4. Mount the UI
    ui.mount();
  });

Fresh eyes tomorrow will likely resolve but I thought I'd say hello and ask :-)

Thank you!

[aklinker1]

The first argument inside onMount is an element inside the shadow root that your UI needs to be mounted to. Thats fine.

Your problem is that you're not telling the UI where it should be mounted on the page, so it defaults to the end of the page's body.

Pass the anchor option:

const anchor = item.getElementsByClassName('card-container')[0];
if (!anchor) return;

const ui = await createShadowRootUi(ctx, {
  name: 'search-result-ui-' + ID + '-' + i,
  anchor,
  // ...
});

You're probably confusing yourself since you have a shadowed variable named targetContainer. Where the UI will be mounted on the page is called the "anchor" and the wrapper element your UI gets added to inside the shadow root is called the uiContainer.

[sgcullen]

Hi @aklinker1 Aaron - that's great!
Really appreciated.

As a linked aside, I've gone ahead and set tailwind up (and I'm using the Shadow to isolate styles) but I can have 60+ mini Svelte apps on a web page with a content script.

1. In your experience, is this good/ok practice? I have all the tailwind resets and base classes being applied to each Shadow Root multiple times - is this a bad idea? Would I be better to just add to the Light DOM and prefix the tailwind classes once to isolate them?

2. The parent webpage is outside of my control and pagination of it (where search results that I'm augmenting are displayed) causes the removal of the Shadow Roots I've added.
   Before moving to wxt, I was using a MutationObserver to call app.destroy() against the svelte app with an id when the MutationObserver detected a node was removed.
   Am I better to use the onRemove callback for this? I'm a little unsure when this gets fired as it doesn't seem to be being called currently when the 3rd party page forcibly wipes the Shadow Dom from the page.

Thanks again for your assistance and your work on making web ext DX better!

I found wxt after moving from crxjs to your webext helper and stumbled on wxt then!

[aklinker1]

I found wxt after moving from crxjs to your webext helper and stumbled on wxt then!

Cool, glad you're liking it!

I can have 60+ mini Svelte apps on a web page with a content script. In your experience, is this good/ok practice?

I'm not sure TBH. Frontend frameworks usually run as one app per page, but in recent times, you start to see multiple apps or different frameworks being combined.

So I would say it depends on the size of the apps. If they're simple static UIs or they don't need much reactivity, I would recommend using vanilla JS to build the UI. But if they're complex and Svelte is helpful, keep doing it.

As for CSS... check the network tab. You should see a network request for the CSS of each UI. The response might be cached, it might not be, I don't know.

If you're not happy about how the CSS is being loaded (it's taking too long, etc.), you can manually fetch the styles once, and apply them inside each UI yourself.

import './style.css';

export default defineContentScript({
  matches: ['<all_urls>'],
  // DON'T USE "ui" if you want to control how CSS is loaded
  cssInjectionMode: 'manual',

  async main(ctx) {
    const stylesText = await fetch(browser.runtime.getURL("/content-scripts/<name>.css"))
      .then(res => res.text());
    
    for (...) {
      const ui = await createShadowRootUi(ctx, {
        name: 'example-ui',
        position: 'inline',
        onMount(container, shadow) {
          // Create style block manually
          const style = document.createElement("style");
          style.textContent = stylesText.replaceAll(':root', ':host'); // Modify base tailwind styles to work in shadow roots
          shadow.querySelector("head")!.append(style);
          
          // Create and mount your app
          const app = new App({ target: container });
          return app;
        },
      });
      ui.mount();
    }
  },
});

Refer to the source code to understand how CSS is loaded normally, and why this approach works:

wxt/src/client/content-scripts/ui/index.ts

Lines 105 to 109 in e7c3fc2

	if (ctx.options?.cssInjectionMode === 'ui') {
	const entryCss = await loadCss();
	// Replace :root selectors with :host since we're in a shadow root
	css.push(entryCss.replaceAll(':root', ':host'));
	}

Before moving to wxt, I was using a MutationObserver to call app.destroy() against the svelte app with an id when the MutationObserver detected a node was removed.
Am I better to use the onRemove callback for this? I'm a little unsure when this gets fired as it doesn't seem to be being called currently when the 3rd party page forcibly wipes the Shadow Dom from the page.

In your case, I'd still recommend setting up a mutation observer for the anchor element, and call ui.remove when the anchor is removed from the DOM. As long as you're destroying your Svelte app in onRemove like the docs show, then the apps will be destroyed correctly.

[sgcullen]

Cool, glad you're liking it!
Yes - very much so. I don't bring with me vast amounts of xp with regards to chrome extension development and so the somewhat opinionated nature of wxt enforcing some best practice is really helpful. I think there's room for wxt to become really quite popular - I hope that's the case!

I'm not sure TBH. Frontend frameworks usually run as one app per page, but in recent times, you start to see multiple apps or different frameworks being combined.

Yes - I started building this in React as that's where my experience lies but moved to Svelte as it seems widely recommended for multi-micro frontends.

So I would say it depends on the size of the apps. If they're simple static UIs or they don't need much reactivity, I would recommend using vanilla JS to build the UI. But if they're complex and Svelte is helpful, keep doing it.
Ok. That's a fair tip. I could likely do it without svelte but it doesn't seem to be slow at the moment so I'll keep plowing on and see if it causes a bottleneck!

As for CSS... check the network tab. You should see a network request for the CSS of each UI. The response might be cached, it might not be, I don't know.

If you're not happy about how the CSS is being loaded (it's taking too long, etc.), you can manually fetch the styles once, and apply them inside each UI yourself.

Great tips. Having done this, it appears that the css isn't being cached. I'll give your suggested a method a try to do it in 1 go. I've not run into a performance issue tbh so maybe I'm over optimising too early but it just feels like I can do better!

In your case, I'd still recommend setting up a mutation observer for the anchor element, and call ui.remove when the anchor is removed from the DOM. As long as you're destroying your Svelte app in onRemove like the docs show, then the apps will be destroyed correctly.

My mutation observer is currently at a higher part of the DOM - catching all possible mutations as the anchor elements themselves get removed by the site script out of my control. The higher level DOM Node (from where I watch for nodes added and removed in the ChildList Subtree) does not get removed as pagination occurs. Heres my entry point:

export default defineContentScript({
  matches: ['*://www.<searchResultPage.co.uk/s?*'],
  runAt: 'document_idle',
  cssInjectionMode: 'ui',
  async main(ctx) {

    // Get all the search result page elements
    const searchResultPageElements = getSearchResultsPageElements();
    console.log('after the searchResultPageElements');

    // Create a map to store the search results. The map enforces uniqueness
    const searchResultsMap = new Map<string, SearchResult>();

    //Append data components to page in svelte component
    await addInfluencerDataToSearchResults(
      searchResultPageElements,
      searchResultsMap,
      ctx,
    );

    // Get Mutation obeserver DOM element
    const parent = document.querySelector(
      "[data-component-type='s-search-results']",
    );

    watchSearchResultsForAddOrRemove(parent!, searchResultsMap, ctx);
  },
});

It's within the watchSearchResultsForAddOrRemove(parent!, searchResultsMap, ctx); mutation observer that I handle the removal using the map and the unique reference that allows me to do the following in a cleanup within the mutation observer:

searchResultsMap.get(node.getAttribute('data-attribute-id')!)?.$destroy();

But, by doing this, I'm not using the onRemove method. I can change this by passing the ref to the ui instead of the svelte app and calling it. This seems to work on a quick test.

const ui = await createShadowRootUi(ctx, {
      name: 'search-result-ui-' + ID + '-' + i,
      position: 'inline',
      anchor: targetContainer,
      onMount: (targetContainer) => {
        // Create the Svelte app inside the UI container
        const app = new App({
          target: targetContainer,
          props: {
            name: ID!,
          },
        });
        return app;
      },
      onRemove: (app) => {
        // Destroy the app when the UI is removed
        console.log('destroying app');
        app?.$destroy();
      },
    });

    searchResultsMap.set(ID!, ui);
    // 4. Mount the UI
    ui.mount();
  });

I'll keep pushing forward and see how it goes!

Thanks so much for your help Aaron. Just sent a tiny tiny token to say thanks :-). Hope to be able to give more as I get things off the ground!

[aklinker1]

Haha thank you :) Good luck figuring everything out!