function App () {
  <Root>
    <Parent id=a/> WORKS
  <Root>
}
  
function Root() {
  useContextProvider() context;
  <Parent id=b/>
  <Context2>
    <slot/>
  </Context2>
}

function Parent() {
  <span>{context.value}</span>
  // Is this allowed???
  <span>{context2.value}</span>
}
  
function Context2() {
  export context2;
  <div><Slot/></div>
}

<Root>
  <Parent1>
  <Slot>
    #SHADOWDOM
      <Parent id=a>
        <span>....</span>
      </Parent>
  </Slot>

  <Parent id=b>
    <span>....</span>
  </Parent>

    

## Manu

<Root>
  <Parent id=a/>
  #SHADOWDOM
    <Parent id=b>
      <span>....</span>
    </Parent>
    <slot/> // <<- virtually here

    

---

<ContextProvider>

<ContextProvider2>

  <Slot/>

</ContextProvider2>

</ContextProvider>

<CompA>

<ContextConsumer/>

</CompA>

CompA

<ContextProvider>

<Slot/>

</ContextProvider>

---------------

// Context must be static
useContextProvider(cond ? 1 : 2);

const signal = useContext(); // always the same value

  if () {
    <ContextA>{props.children}</ContextA>
  } else {
    <ContextB>{props.children}</ContextB>  
  }

https://stackblitz.com/edit/react-ts-7wjpey?file=App.tsx

---
Puzzle for Adam: What is `foo`?

function App() {
  <ContextProvider foo="123">
    <Root>
      <ContextReader read="foo"/>
    </Root>
  </ContextProvider>
}

function Root() {
  <Child>
    <Slot/>
  </Child>
}

function Child() {
  <ContextReader>
  // <ContextProvider foo="321">
  //   <Slot/>
  // </ContextProvider>
}

### WORKS
layout.tsx

useContextProvider(CTX, value);

<Slot/>

index.tsx

useContext(CTX) // WORKS

### Does NOT WORK

provider.tsx

useContextProvider(CTX, value);

<Slot/>

layout.tsx

<PROVIDER>
  <Slot/>
</PROVIDER>

index.tsx

useContext(CTX) // WORKS

<Layout>
<Slot>
<Index></Index>
</Slot>
</Layout>

<A>
<B></B>
</A>

function A () {
// asycn stuff here
<C><Slot/></C>
}

<A>
<D></D>
</A>