custom-elements/examples/custom/8/index.html at main · portsoc/custom-elements · 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
<!doctype html>
<title>Ex8 Analog Clock</title>
<script type=module src="analog/clock.js"></script>

<style>
  analog-clock {
    width: 5rem;
    display: inline-block;
    vertical-align: middle;
  }

  .special {
    color: red;
  }

</style>

<h1>Custom Element Ex8</h1>
<h2>An analog clock using SVG</h2>

<p>This example use SVG to draw a clock.

<p>This clock has the seconds attribute&hellip; <analog-clock seconds></analog-clock>

<p>This clock has no seconds attribute&hellip; <analog-clock style="color: blue;"></analog-clock> &hellip; but the colour is set in a style attribute.

<p class="special">Notice that this clock's colour <analog-clock seconds></analog-clock> is inherited from the colour of the text.  This is made possible by the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword">currentColor</a></code> keyword.