Module with Hydration

About this demo

Built with es format and included via <script type="module"> with HTML pre-rendered and components initialized after page load to enable interactivity (a.k.a. “hydrated”).

CLS can occur when your svelte-retag web components loaded as modules don't render until after the HTML on the rest of the page has finished parsing. SSR/SSG combined with hydration helps to eliminate this by pushing the code responsible for displaying your web components immediately along with the rest of the page. Interactivity is then restored to those components once modules (which are always deferred) have finished loading.

View the page source 🚀. This demo is implemented entirely using via svelte-retag with all Svelte components organized on the page using custom elements (or “web components”). Featuring:

  • Slots (default and named slots)
  • Nesting within slots
  • Context (including nested context, see “Examples” tab)
  • Vite HMR updates (if launched locally)
  • SSR/SSG via hydration (experimental)

Performance

This demo also shows the differences between deferred Modules and IIFE, particularly with regard to CLS (Cumulative Layout Shift). Use the Demos navigation above and compare each one by opening DevTools, disabling cache, and then enabling network throttling (e.g. try "Fast 3G").

All element attributes in this particular demo are configured to be dynamic. Try editing the pagetitle in <app-tag pagetitle="..."> above or any of the count or award attributes in any of the <counter-tag> buttons below.

For example: Each counter below takes an initial count attribute with an award value, at which point a 🎉 emoji is first displayed (with randomized emojis after that). Press + or - keys on your keyboard to quickly increase/decrease the count.

Default: count starts at 0, award at 100.

Start out just 1 click away from the award.

1337 award

Slot: "Total is"

Credit to AmirPournasserian from this StackOverflow post for the original .svelte components which were then converted to custom elements using svelte-retag to help demonstrate context. These are implemented purely by arranging the following tags using only HTML and can even be nested, just like in this demo!

<tabs-wrapper>
  <tab-list>
    <tab-button>Tab 1</tab-button>
    <tab-button>Tab 2</tab-button>
  </tab-list>

  <tab-panel>
    <!-- Content for Tab 1 -->
  </tab-panel>

  <tab-panel>
    <!-- Content for Tab 2 -->
  </tab-panel>
</tabs-wrapper>

In this example, <tabs-wrapper> defines the shared context and <tab-button> toggles between each <tab-panel> within that context.