<!doctype html>

<my-app></my-app>

<script type="module">
  import { component, createContext, useContext, useState, html } from '../haunted.js';

  const ThemeContext = createContext();

  customElements.define('theme-provider', ThemeContext.Provider);

  function Circle({ theme }) {
    return html`
      <svg width=${100} height=${100}>
        <circle
         cx=${50}
         cy=${50}
         r=${45}
         stroke-width="4px"
         stroke="#000"
         fill=${theme === 'spooky' ? '#555' : '#f