HELP How to create an isolate section with some css and javascript inside

[NatachaH]

Hi,

I want to create a section where I can put some demo code that is isolated from the default layout.

The section must:

• Have it's own css layout
• Have some vanilla javascript interaction with the DOM

I installed the Whyframe plugin, and followed the steps to create the iframe.

I figured how to make my css work (it's ugly but it work), but nothing work for my javascript code and I don't understand how to make it work (or if it's even possible ?)

My code work when I preview on DEV mode (npm run docs:dev) but nothing work when I deploy with (npm run docs:build)...

[brc-dd]

ah just create an iframe? whyframe is only needed if you need to render vue 👀

[NatachaH]

@brc-dd yeah that what i faught but when i tried to add the src to the iframe, it load a Vitepress 404 error page ...

EDIT: Ok I figured how to display a custom HTML page by placing the source code into the public folder. But is there a way to use it as Whyframe with a SLOT area to re-use the iframe with different code exemple ?

[brc-dd]

Sorry, I've no idea. Maybe someone will need to write a whyframe like plugin but for html 👀

[NatachaH]

Ok thanks you.

I ended up by create an entire classic HTML website with some web component to avoid repetition of the navigation and stuff...