Skip to content

Instantly share code, notes, and snippets.

@newbornfrontender

newbornfrontender/index.html

Created November 2, 2018 09:08
Show Gist options
  • Save newbornfrontender/16eb6349ed3cea103c89fade2de73a63 to your computer and use it in GitHub Desktop.
Save newbornfrontender/16eb6349ed3cea103c89fade2de73a63 to your computer and use it in GitHub Desktop.
Download ZIP
Lit-html (list example)
Raw
index.html
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Lit HTML</title>
</head>
<body>
<script type="module" src="/index.js"></script>
</body>
</html>
Raw
index.js
import { html, render } from './node_modules/lit-html/lit-html.js';
const items = [{
title: 'Home',
link: '/',
}, {
title: 'About',
link: '/about',
}, {
title: 'Price',
link: '/price',
}];
const list = () => html`${items.length > 0
? html`<ul>
${items.map(({ link, title }) => html`
<li>
<a href="${link}">${title}</a>
</li>
`)}
</ul>`
: html`<div>List is empty</div>`
}`;
render(list(), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment