Skip to content

Instantly share code, notes, and snippets.

@bengfarrell

bengfarrell/gist:c3909d35a13150ea71c097780bbc00fe

Created July 26, 2019 04:25
Show Gist options
  • Save bengfarrell/c3909d35a13150ea71c097780bbc00fe to your computer and use it in GitHub Desktop.
Save bengfarrell/c3909d35a13150ea71c097780bbc00fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bengfarrell created this gist Jul 26, 2019.
    32 changes: 32 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module">
    import { html, render } from 'https://unpkg.com/lit-html';

    /** UNCOMMENT THE FOLLOWING AND COMMENT OUT THE IMPORT TO NOT USE LIT-HTML
    const html = function(strings, ...values) {
    let str = '';
    strings.forEach((string, i) => {
    str += string + values[i];
    });
    return str;
    };
    const render = function(template, el) { el.innerHTML = template; }
    **/


    const rectangle = html`<rect x="100" y="100" width="50" height="50" stroke="red" fill="green"></rect>`;
    const template = html`
    <svg viewBox="0 0 500 500">
    <circle cx="50" cy="50" r="50" stroke="red" fill="red"></circle>
    ${rectangle}
    </svg>`;
    render(template, document.getElementById('container'));
    </script>
    </head>
    <body>
    <div id="container"></div>
    </body>
    </html>