fc662728eb
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
51 lines
2.8 KiB
HTML
51 lines
2.8 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> ⌲ Install</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>Install</h1>
|
|
<p><code><my-element></code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
|
|
<h2>Local Installation</h2>
|
|
<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">npm</span> i my-element</span></code></pre>
|
|
<h2>CDN</h2>
|
|
<p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
|
|
<p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite "bare" module specificers to full URLs.</p>
|
|
<h3>HTML</h3>
|
|
<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>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span></code></pre>
|
|
<h3>JavaScript</h3>
|
|
<pre class="language-html"><code class="language-html"><span class="highlight-line">import {MyElement} from 'https://unpkg.com/my-element?module';</span></code></pre>
|
|
|
|
</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> |