Note: Shadow DOM is kind of useless for the Provider component. It makes more sense for the Consumer.

A card component could provide a 'color-theme' context to it's children, but also have it's own shadow DOM

@bennypowers The Provider doesn't seem to be using component and does not currently have a shadow DOM.
When doing

import { createContext, component, html } from 'haunted';
const ThemeContext = createContext();
customElements.defined('theme-context-consumer', ThemeContext.Consumer);

// ...
const tmpl = html`
       <theme-context-consumer .render=${v => html`
          <span class="somespan">${v}</span>
            `}></theme-context-consumer>
`

then .somespan is by default in the shadow DOM of theme-context-consumer and you can't style it.
That is not intuitive but it would be good if it could be overwritten with createContext(defaultValue, {useShadowDOM: false}).