This repository was archived by the owner on Feb 14, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
93 lines (80 loc) · 5.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/lit-html/index.css">
<link rel="stylesheet" href="/lit-html/prism.css">
</head>
<body>
<nav id="top-nav">
<div class="icon-large">lit-html</div>
<ul>
<li ><a href="/lit-html/">Home</a></li>
<li ><a href="/lit-html/guide/">Guide</a></li>
<li ><a href="/lit-html/api/">API</a></li>
<li><a href="https://github.com/Polymer/lit-html">GitHub</a></li>
</ul>
</nav>
<main>
<h1 id="next-generation-html-templates-in-javascript">Next-generation HTML Templates in JavaScript</h1>
<p>lit-html: An efficient, expressive, extensible HTML templating library for JavaScript.</p>
<section class="feature">
<a class="cta" href="/lit-html/guide">Get Started</a>
<a class="cta" href="https://github.com/Polymer/lit-html">GitHub</a>
</section>
<p>lit-html lets you write HTML templates in JavaScript, then efficiently render and <em>re-render</em> those templates together with data to create and update DOM:</p>
<pre class="code language-js" language="js">
<span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span>
<span class="token comment">// A lit-html template uses the `html` template tag:</span>
<span class="token keyword">let</span> <span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token operator">=></span> html<span class="token template-string"><span class="token string">`<h1>Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h1>`</span></span><span class="token punctuation">;</span>
<span class="token comment">// It's rendered with the `render()` function:</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token string">'World'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// And re-renders only update the data that changed, without</span>
<span class="token comment">// VDOM diffing!</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token string">'Everyone'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h2 id="why-use-lit-html-">Why use lit-html?</h2>
<section class="cards">
<div class="card">
<h3>Efficient</h3>
<p>
lit-html is extremely fast. It uses fast platform features like HTML <code><template></code> elements with native cloning.
</p>
<p>
Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn't ever re-render the entire view.
</p>
</div>
<div class="card">
<h3>Expressive</h3>
<p>
lit-html gives you the full power of JavaScript and functional programming patterns.
</p>
<p>
Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need at all.
</p>
<p>
lit-html support many kind of values natively: strings, DOM nodes, heterogeneous lists, Promises, nested templates and more.
<p>
</div>
<div class="card">
<h3>Extensible</h3>
<p>
lit-html is extremely customizable and extensible.
</p>
<p>
Different dialects of templates can be created with additional features for setting element properties, declarative event handlers and more.
</p>
<p>
Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more. lit-html is like your very own a template construction kit.
</p>
</div>
</section>
<p>lit-html is not a framework, nor does it include a component model. If focuses on one thing and one thing only: efficiently creating and updating DOM. It can be used standalone for simple tasks, or combined with a framework or component model, like Web Components, for a full-featured UI development platform.</p>
<h2 id="announcement-at-polymer-summit-2017">Announcement at Polymer Summit 2017</h2>
<section class="feature">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ruql541T7gc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
<main>
<footer>
<p>© 2018 Polymer Authors. Code Licensed under the BSD License. Documentation licensed under CC BY 3.0.</p>
</footer>
</body>
</html>