Skip to content

Instantly share code, notes, and snippets.

@harmenjanssen

harmenjanssen/index.html

Created May 27, 2019 06:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harmenjanssen/07e425248779c65bc5d11b02fb913274 to your computer and use it in GitHub Desktop.
Save harmenjanssen/07e425248779c65bc5d11b02fb913274 to your computer and use it in GitHub Desktop.
Download ZIP
Wrap JS-dependent elements in a `<template>`, and simply unwrap at runtime.
Raw
index.html
<!doctype html>
<title>Hello</title>
<p>The following search field depends on Javascript, so let's render it with Javascript:
<template data-autorender="true">
<form>
<input type="search">
</form>
</template>
Raw
main.js
// Run over all templates, and replace them with their contents.
document.querySelectorAll('template[data-autorender]').forEach(template =>
template.parentNode.replaceChild(
template.content,
template
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment