fc662728eb
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
72 lines
4.4 KiB
HTML
72 lines
4.4 KiB
HTML
|
|
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><my-element> ⌲ Home</title>
|
|
<link rel="stylesheet" href="/docs/docs.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
|
|
<script type="module" src="/my-element.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1><my-element></h1>
|
|
<h2>A web component just for me.</h2>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="/docs/">Home</a>
|
|
<a href="/docs/examples/">Examples</a>
|
|
<a href="/docs/api/">API</a>
|
|
<a href="/docs/install/">Install</a>
|
|
</nav>
|
|
<div id="main-wrapper">
|
|
<main>
|
|
<h1><my-element></h1>
|
|
<p><code><my-element></code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
|
|
<h2>As easy as HTML</h2>
|
|
<section class="columns">
|
|
<div>
|
|
<p><code><my-element></code> is just an HTML element. You can it anywhere you can use HTML!</p>
|
|
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
|
|
</div>
|
|
<div>
|
|
<p><my-element></my-element></p>
|
|
</div>
|
|
</section>
|
|
<h2>Configure with attributes</h2>
|
|
<section class="columns">
|
|
<div>
|
|
<p><code><my-element></code> can be configured with attributed in plain HTML.</p>
|
|
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
|
|
</div>
|
|
<div>
|
|
<p><my-element name="HTML"></my-element></p>
|
|
</div>
|
|
</section>
|
|
<h2>Declarative rendering</h2>
|
|
<section class="columns">
|
|
<div>
|
|
<p><code><my-element></code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
|
|
<pre class="language-js"><code class="language-js"><span class="highlight-line"><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><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="token function">render</span><span class="token punctuation">(</span>html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><span class="highlight-line"> <h2>This is a my-element>h2></span><br><span class="highlight-line"> <my-element .name=</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">></my-element></span><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
|
</div>
|
|
<div>
|
|
<p><my-element name="lit-html"></my-element></p>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>
|
|
Made with
|
|
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html> |