Black Lives Matter. Please consider donating to Black Girls Code today.

Can we pass a list of dash components to `app.layout`

My dash app is constituted of a html.Header, html.Main, and a html.Footer.

It seems however that app.layout accepts only one dash component (usually a html.Div), and not a list of dash components.

This makes me use an ugly div container to wrap everything:

app.layout = html.Div(
    [
        html.Header(),
        html.Main(),
        html.Footer(),
    ],
    id='im-an-ugly-wrapper-for-my-dash-app-layout',
)

Is there a way not to wrap my “top-level” dash components in a div?

Indeed, the content of app.layout is already wrapped in multiple divs, notably <div id="_dash-app-content">:

<body>
  <div id="react-entry-point">
    <div class="_dash-undo-redo">
    </div>
    <div id="_dash-app-content">
      <!-- CONTENT OF app.layout IS INSERTED HERE -->
    </div>
  </div>
</body>

See " * Customizing Dash’s HTML Index Template" in https://dash.plot.ly/external-resources

There is not.