Make div "behave" like body element

Considering this simple HTML:

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

What is the best way to make the #app-root div "behave" like the <body> element? For example, if I set background-color: red; on the <body> element, the page obviously becomes red. But if I do the same to #app-root nothing happens (obviously) because there's no content inside of it. But I want #app-root to behave like the <body> element.

15 Replies

b1mind•13mo ago

display: contents; It will just be ignored that way and body would be your parent element

t1mp4•13mo ago

Awesome, thanks! But what if I already have a div with display: contents; like this:

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div style="display: contents;">
            <div id="app-root"></div>
        </div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div style="display: contents;">
            <div id="app-root"></div>
        </div>
    </body>
</html>

... but I still want the #app-root div to behave like the body element? 🙂

b1mind•13mo ago

why would you though? you would only put it on the #app-root

t1mp4•13mo ago

Svelte

b1mind•13mo ago

no point in wrapping yet another div around it if you are using Sveltekit this would be default 😉

t1mp4•13mo ago

Basically I need the #app-root in order to make my theme switcher work without javascript

b1mind•13mo ago

so just do

<div id="app-root" style="display: contents;">
</div>

<div id="app-root" style="display: contents;">
</div>

Not sure how you are using Svelte but I always recommend using SvelteKit no matter the project. No reason not too. (even the svelte docs now point you to using it too)

t1mp4•13mo ago

I am using SvelteKit 😄 As I mentioned, I need the #app-root wrapper to make my theme switcher work without JavaScript. My root +layout.svelte file looks like this:

<script lang="ts">
  import { themeStore, type Theme } from "$lib/store";
  import "../styles/globals.css";

  export let data;

  themeStore.update(() => data.theme);

  let theme: Theme;
  themeStore.subscribe((value) => {
    theme = value;
  });
</script>

<div id="app-root" data-theme={theme}>
  <slot />
</div>

<script lang="ts">
  import { themeStore, type Theme } from "$lib/store";
  import "../styles/globals.css";

  export let data;

  themeStore.update(() => data.theme);

  let theme: Theme;
  themeStore.subscribe((value) => {
    theme = value;
  });
</script>

<div id="app-root" data-theme={theme}>
  <slot />
</div>

If the user doesn't have JS, the theme gets updated server-side.

b1mind•13mo ago

Not sure what you are needing then what is your expected behavior when you mean "div to behave like the body element"

b1mind•13mo ago

https://sveltelab.dev

SvelteLab

A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.

b1mind•13mo ago

great for sharing examples 🙂 Main thing I guess would be how the styles are being appied with the dataset you could always just do another display: contents; though 😄 but depending how you style based on the data-set I'm not sure if that would work.

t1mp4•13mo ago

I tried another display: contents; but it doesn't seem to do anything. Basically this is what I have. I left out the progressive enhancement part, but you get the idea. This works entirely without JavaScript. Maybe there's a better way of doing it that I didn't think of? https://www.sveltelab.dev/qc56k99ulz5dsd2

SvelteLab

A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.

b1mind•13mo ago

Hey sorry I didn't see you had made a demo. I would probably check the cookie in a hook.server.js and pass the value in locals to the layout.server.js

b1mind•13mo ago

https://scriptraccoon.dev/blog/darkmode-toggle-sveltekit

Script Raccoon

How to implement a cookie-based dark mode toggle in SvelteKit

Implemented using server-side rendering and SvelteKit's handle hook.

b1mind•13mo ago

https://kit.svelte.dev/docs/hooks you are setting a default too then overwriting with the prefers. I would remove that

Gaming

Programming

Make div "behave" like body element