Context without shadow root

[megheaiulian]

When creating a Context it is useful to opt out of using shadow DOM for the Consumer and Provider components. To allow that createContext could pass thru the second argument of component. Note: Shadow DOM is kind of useless for the Provider component. It makes more sense for the Consumer.

[bennypowers]

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

[megheaiulian]

@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}).