Skip to content

Instantly share code, notes, and snippets.

@sorvell

sorvell/dsd-no-fouc.html

Created April 28, 2026 16:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sorvell/7c11cd20c1e619630a91cf2bfa6ca43a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sorvell/7c11cd20c1e619630a91cf2bfa6ca43a to your computer and use it in GitHub Desktop.
Download ZIP
Declarative Shadow DOM without FOUC
Raw
dsd-no-fouc.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://esm.sh/@awesome.me/webawesome/dist/styles/themes/default.css">
<link rel="preload" href="https://esm.sh/@awesome.me/webawesome/dist/styles/native.css" as="style">
<script> /* link preload + script to prevent FOUC on Firefox/Safari */ </script>
</head>
<body>
<h2>DSD Fouc Test</h2>
<div>must not layout shift</div>
<div>
<template shadowrootmode="open">
<style>
/* @import to prevent FOUC on Chrome */
@import url("https://esm.sh/@awesome.me/webawesome/dist/styles/native.css");
</style>
<button class="wa-button>">must not fouc!</button>
</template>
</div>
<div>must not layout shift</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment