repl.it
@todojs/

07-lit-html-wc-countries

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Template</title>
</head>
<body>
<script type="module">
  import { html, render } from 'https://unpkg.com/lit-html?module';

  const path = 'https://raw.githubusercontent.com/hjnilsson/country-flags/master';
  const priv = new WeakMap ();

  class WCCountries extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      priv.set (this, {data : {}});
      fetch (`${ path }/countries.json`)
        .then (response => {
          if (response.status === 200) {
            return response.json ();
          }
        })
        .then (data => {
          this.data = data;
        });
    }

    render () {
      const data = this.data;
      render (html`
      <style>
        img { width: 40px; }
      </style>
      <table>
        <thead><tr><th>Flag</th><th>Country</th></tr></thead>
        <tbody>
          ${ Object.keys (data).map (country => html`
          <tr>
            <td>
              <img src="${ path }/png100px/${ country.toLowerCase () }.png\">
            </td>
            <td>
              ${ data[ country ] }
            </td>
          </tr>`) }
        </tbody>
      </table>
    `, this.shadowRoot);
    }

    get data () {
      return priv.get (this).data;
    }

    set data (value) {
      priv.set (this, {data : value});
      this.render ();
    }
  }

  customElements.define ('wc-countries', WCCountries);
</script>
<wc-countries></wc-countries>
</body>
</html>
result
console
?