New <main> tags breaks "--to slides"

[edrogers]

As of version 7.7.0, "a main landmark for the Notebook content" was added. This means that a new HTML tag, <main> tag is included in HTML output. (This was part of #2021.)

Unfortunately, when you convert a Jupyter Notebook to HTML slides, this additional tag means that the page will not properly render. (Instead, the contents are all squeezed into the progress bar.) I've encountered this issue in multiple modern browsers on varying platforms.

Reproducible Example

File: helloworld.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "2f089d91-58fa-4e2a-b800-a36873e0d6b1",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "# Hello World!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d5d3d8c4-9898-4571-9559-cbdf1326fba6",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## This is a simple notebook that will be converted to slides\n",
    "\n",
    "The command to be used will be:\n",
    "```sh\n",
    "jupyter-nbconvert helloworld.ipynb --to slides\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}

Command to convert:

jupyter-nbconvert helloworld.ipynb --to slides

If the above command is called with nbconvert 7.6.0, the resulting HTML renders fine. If it's run with nbconvert 7.7.0, the content is squeezed into the progress bar and is illegible.

Extra info:

The advice of this StackOverflow answer a few years ago suggested using CSS to prevent the main tag from affecting the layout. I tried it manually, and it worked. Alternatively, when I manually stripped the <main> tags from the document, that also worked.

[pplonski]

I'm using nbconvert package in the Mercury framework (convert notebooks to web apps). We have an option to create interactive slides with widgets in Mercury framework. I'd like to thank you all for your work! I wasn't be able to create Mercury without nbconvert!

Thank you @edrogers for reporting the issue. I have the similar issue with the newest nbconvert 7.7.2 - slides are squeezed into the progress bar.