hello-web-component/custom-element.html at main · het22/hello-web-component · GitHub

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
<html>
  <body>
    <main>
      <h1>Custom Element</h1>
      <section>
        <h2>My Favorite Movies</h2>
        <ul>
          <li>
            <movie-card
              title="12 Angry Men"
              author="Sidney Lumet"
              date="1957"
            />
          </li>
          <li>
            <movie-card
              title="Princess Mononoke"
              author="Miyazaki Hayao"
              date="1997"
            />
          </li>
          <li>
            <movie-card
              title="Dances with Wolves"
              author="Kevin Costner"
              date="1990"
            />
          </li>
        </ul>
      </section>
    </main>
  </body>
  <script>
    class MovieCard extends HTMLElement {
      constructor() {
        super();

        var shadow = this.attachShadow({ mode: 'open' });

        var titleElement = document.createElement('h3');
        titleElement.innerText = this.getAttribute('title');
        shadow.appendChild(titleElement);

        var authorElement = document.createElement('address');
        authorElement.innerText = this.getAttribute('author');
        shadow.appendChild(authorElement);

        var dateElement = document.createElement('time');
        var date = this.getAttribute('date');
        dateElement.dateTime = date;
        dateElement.innerText = date;
        shadow.appendChild(dateElement);
      }
    }
    customElements.define('movie-card', MovieCard);
  </script>
</html>