ff'}
         >
        </circle>
      </svg>
    `;
  }

  customElements.define('my-circle', component(Circle));

  function Child() {
    const context = useContext(ThemeContext);

    return html`<my-circle .theme=${context}></my-circle>`;
  }

  customElements.define('my-child', component(Child));
  customElements.define('theme-consumer', ThemeContext.Consumer);

  function App() {
    const [theme, setTheme] = useState('spooky');

    return html`
        <select
          value=${theme}
          @c