ducksoupdev/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webcomponents test</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <wc-clock></wc-clock>
  <script src="/index.js"></script>
</body>
</html>

## index.js
import h from "vhtml";

const times = n => Array(n).fill().map((x, i) => i);

const getPointerPosition = date => ({
  hours: `rotate(${(date.getHours() / 12 - 1) * 360} 200 200)`,
  minutes: `rotate(${date.getMinutes() / 60 * 360} 200 200)`,
  seconds: `rotate(${date.getSeconds() / 60 * 360} 200 200)`
});

const Clock = ({ hours, minutes, seconds }) =>
  <svg viewBox="-20 -20 440 440" height="400" width="400" fill="#777">
    {times(60).map(i =>
      <rect
        height={i % 5 === 0 ? 30 : 12}
        width={i % 5 === 0 ? 4 : 2}
        x={i % 5 === 0 ? 198 : 199}
        y="0"
        transform={`rotate(${6 * i} 200 200)`}
      />
    )}
    <rect id="hours" height="160" width="6" x="197" y="60" transform={hours} />
    <rect id="minutes" height="200" width="4" x="198" y="20" transform={minutes} />
    <g id="seconds" transform={seconds} fill="tomato">
      <rect height="200" width="2" x="199" y="20" />
      <rect height="40" width="10" x="195" y="200" />
    </g>
    <circle fill="none" stroke="#777" stroke-width="4" cx="200" cy="200" r="216" />
  </svg>;

class WCClock extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "closed" });
  }

  connectedCallback() {
    this.shadow.innerHTML = <Clock {...getPointerPosition(new Date())} />;
    this.hours = this.shadow.getElementById("hours");
    this.minutes = this.shadow.getElementById("minutes");
    this.seconds = this.shadow.getElementById("seconds");
    this.interval = setInterval(() => this.update(), 1000);
  }

  disconnectedCallback() {
    clearInterval(this.interval);
  }

  update() {
    const { hours, minutes, seconds } = getPointerPosition(new Date());
    this.hours.setAttribute("transform", hours);
    this.minutes.setAttribute("transform", minutes);
    this.seconds.setAttribute("transform", seconds);
  }
}

customElements.define("wc-clock", WCClock);

## package.json
{
  "devDependencies": {
    "bubleify": "^0.7.0",
    "budo": "^10.0.4",
    "rollupify": "^0.4.0"
  },
  "dependencies": {
    "vhtml": "^2.1.0"
  },
  "scripts": {
    "start": "budo index.js --live"
  },
  "browserify": {
    "transform": [
      [
        "bubleify",
        {
          "jsx": "h",
          "transforms": {
            "classes": false
          }
        }
      ],
      "rollupify"
    ]
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>webcomponents test</title>
	<style>
	body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	</style>
	</head>
	<body>
	<wc-clock></wc-clock>
	<script src="/index.js"></script>
	</body>
	</html>
	import h from "vhtml";

	const times = n => Array(n).fill().map((x, i) => i);

	const getPointerPosition = date => ({
	hours: `rotate(${(date.getHours() / 12 - 1) * 360} 200 200)`,
	minutes: `rotate(${date.getMinutes() / 60 * 360} 200 200)`,
	seconds: `rotate(${date.getSeconds() / 60 * 360} 200 200)`
	});

	const Clock = ({ hours, minutes, seconds }) =>
	<svg viewBox="-20 -20 440 440" height="400" width="400" fill="#777">
	{times(60).map(i =>
	<rect
	height={i % 5 === 0 ? 30 : 12}
	width={i % 5 === 0 ? 4 : 2}
	x={i % 5 === 0 ? 198 : 199}
	y="0"
	transform={`rotate(${6 * i} 200 200)`}
	/>
	)}
	<rect id="hours" height="160" width="6" x="197" y="60" transform={hours} />
	<rect id="minutes" height="200" width="4" x="198" y="20" transform={minutes} />
	<g id="seconds" transform={seconds} fill="tomato">
	<rect height="200" width="2" x="199" y="20" />
	<rect height="40" width="10" x="195" y="200" />
	</g>
	<circle fill="none" stroke="#777" stroke-width="4" cx="200" cy="200" r="216" />
	</svg>;

	class WCClock extends HTMLElement {
	constructor() {
	super();
	this.shadow = this.attachShadow({ mode: "closed" });
	}

	connectedCallback() {
	this.shadow.innerHTML = <Clock {...getPointerPosition(new Date())} />;
	this.hours = this.shadow.getElementById("hours");
	this.minutes = this.shadow.getElementById("minutes");
	this.seconds = this.shadow.getElementById("seconds");
	this.interval = setInterval(() => this.update(), 1000);
	}

	disconnectedCallback() {
	clearInterval(this.interval);
	}

	update() {
	const { hours, minutes, seconds } = getPointerPosition(new Date());
	this.hours.setAttribute("transform", hours);
	this.minutes.setAttribute("transform", minutes);
	this.seconds.setAttribute("transform", seconds);
	}
	}

	customElements.define("wc-clock", WCClock);
	{
	"devDependencies": {
	"bubleify": "^0.7.0",
	"budo": "^10.0.4",
	"rollupify": "^0.4.0"
	},
	"dependencies": {
	"vhtml": "^2.1.0"
	},
	"scripts": {
	"start": "budo index.js --live"
	},
	"browserify": {
	"transform": [
	[
	"bubleify",
	{
	"jsx": "h",
	"transforms": {
	"classes": false
	}
	}
	],
	"rollupify"
	]
	}
	}