Skip to content

Latest commit

 

History

History
52 lines (38 loc) · 1.44 KB

README.md

File metadata and controls

52 lines (38 loc) · 1.44 KB
Raw

Super Template

Build-less template inheritance in the browser. Handy for example or demo pages.

Usage (Codesandbox)

  • <!doctype html> is required in the child template because it's not possible to dynamically change the doctype of a loaded HTML file.
  • The link[rel=preload] ensures the base html files are fetched in parallel with the script file. It's optional but recommended for faster page loads.

layout.html

<template block="head">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</template>

<main>
  <header>header</header>
  <template block="content"></template>
  <footer>footer</footer>
</main>

index.html

<!doctype html>

<script type="module" src="https://cdn.jsdelivr.net/npm/super-template"></script>
<link rel="preload" href="./layout.html" as="fetch" crossorigin>

<title>Super Template Demo</title>

<template extends="./layout.html">
  <template block="head">
    {{super}}
    <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/+esm"></script>
  </template>

  <template block="content">
    <h1>Super Template</h1>
    <p>Build-less template inheritance in the browser. Handy for example or demo pages.</p>
  </template>
</template>

Related