Fix the embedded Lite apps in the docs

[whitphx]

Description

The embedded <gradio-lite> apps' style is broken as below, and 6bb14ca fixes it.

2178f48 is a related refactoring: I found that each component is loading lite.css in each Svelte file (and 6bb14ca did the same in the document markdown file), so lite.js should also be loaded by each component, instead of being loaded globally in +layout.svelte.

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/211698e5d98fcc8ed556c565ae9ff76484e78163/gradio-5.14.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@211698e5d98fcc8ed556c565ae9ff76484e78163#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/211698e5d98fcc8ed556c565ae9ff76484e78163/gradio-client-1.10.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/211698e5d98fcc8ed556c565ae9ff76484e78163/dist/lite.js""></script>

[gradio-pr-bot]

🦄 no changes detected

This Pull Request does not include changes to any packages.

__No changes detected. __

• Maintainers can select this checkbox to manually select packages to update.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can create the changelog file directly.

[abidlabs]

I assume this is ready for a review @whitphx?

[whitphx]

You are right, sorry I forgot to switch the state.

[aliabd]

@whitphx 6bb14ca is fine but the other refactoring doesn't work. I think its a race condition and the lite.js gets loaded after the lite element is added to the dom, which makes it miss it somehow. You can see this here: https://eeca3c64.gradio-website.pages.dev/main/docs/gradio/interface#demos (refresh a couple of times) But that's why i did it in the afterNavigate

[whitphx]

@aliabd Thank you!
Now I think we should keep this refactoring and fix lite.js to work in this situation because such a race condition can be a trouble when Lite is used as a library by community users and it shouldn't require them to take care of loading timing. I will try it.

[whitphx]

The custom component is loaded and the worker is started, but the view is not mounted properly.

---

And the element is already mounted as a custom element.

GradioLite = window.customElements.get("gradio-lite") //class t extends HTMLElement{controller=null;connectedCallback(){window.requestAnimationFrame(()=>{const i=this.parseGradioComponentOptions(),s=this.parseGradioLiteAppOptions();this.innerHTML="",this.contro…
el = document.getElementsByTagName("gradio-lite")[0] //<gradio-lite playground shared-worker layout=​"vertical" class=​"p-2">​…​</gradio-lite>​flex
el instanceof GradioLite // true

---

The following error message is displayed uniquely when this problem happens: Update: It was not true.

[Deprecation] Custom state pseudo classes have been changed from ":--color-var" to ":state(color-var)". See more here: <URL>

Error

Normal

Normal with this error

---

My current hypothesis is this error occurs when svelte.js is loaded after lite.js.

• It always occurs on local dev (pnpm --filter website dev)
• It disappears if <script src="http://localhost:8000/dist/lite.js" type="module"></script> in Demos.svelte is replaced with

  	<script type="module">
    	setTimeout(() => {
    		import("http://localhost:8000/dist/lite.js");
    	}, 1000);
    </script>

---

Tough to fix it now.

[whitphx]

@aliabd Sorry i just reverted the second commit. Plz give a review.

[aliabd]

LGTM @whitphx, i think you're right that we should eventually fix this so users don't have to deal with it. but fair to do this in the future.

[abidlabs]

Awesome I'm going to enable auto-merge so we can get this for the release