<div id="app"></div>

<script type="module">
  import { createSignal } from "https://cdn.skypack.dev/solid-js@1.2.6";
  import html from "https://cdn.skypack.dev/solid-js@1.2.6/html";

  const [n, setN] = createSignal(0)

  setInterval(() => setN(n() + 1), 500)

  function One() {
    return html`<div>value in One: ${n}</div>`
  }

  function Two() {
    return html`<div>value in Two: ${() => n() * 2}</div>`
  }

  // DOM!
  app.append(One())
  app.append(Two())
</script>
#app {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  white-space: nowrap;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.