Recently encountered an issue with child components that just slot in other components. Here's what the component tree looks like:

- Router component
  - Slot "home"
    - Home component
      - Slot "innerHomeComponent"
        - Inner home component
  - Slot "about"
    - About component
      - Slot "innerAboutComponent"
        - Inner about component

In the router, the "home" and "about" slots should never both be rendered, like
this:

  render { route } = do
    HH.div [ class_ (ClassName "should-only-have-one-child") ]
      [ case route of
          Just r -> case r of
            Home -> HH.slot (SProxy :: _ "home") 0 Home.component unit absurd
            About -> HH.slot (SProxy :: _ "about") 1 About.component unit absurd
          Nothing -> HH.div_ [ HH.text "Oh no! That page wasn't found." ]
      ]

But after routing from home to about, I get both home and about rendered in the
.should-only-have-one-child div.

What's triggering the issue is that the Home/About components that the router is
rendering are just slots for their "inner" components. In the example this
doesn't make much sense but in my real code I have that outer component
providing some input to the child component (the parent component is sorta like
the redux connect HOC in react).

Wrapping the inner component's slot in a div fixes the issue:

-    Hooks.pure $ HH.slot _innerComponent unit innerComponent unit absurd
+    Hooks.pure $ HH.div [] [ HH.slot _innerComponent unit innerComponent unit absurd ]

Anyway, I'm sure this hasn't done a great job of explaining the issue, I made a
repo with a reproduction of the issue: https://github.com/marcusbuffett/halogen-slots-issue

And here's a PR with the div fix mentioned above: https://github.com/marcusbuffett/halogen-slots-issue/pull/2/files

The example code does use hooks, but it's not a hooks issue, converting the parent components to "plain" components causes the same issue.