Display format not operative in custom element, poor/nonexistent display in some browsers

Before reporting a bug

• Check common issues.
• Check the bug is reproducible in the demo. If not, check KaTeX is up-to-date and installed correctly.
• Search for existing issues.

Describe the bug: In a functioning custom element, displayMode: true does not result in display mode rendering.

To Reproduce: Steps to reproduce the behavior:

1. Go to https://jxxcarlson.github.io/app/katex/index.html using Firefox
2. Look at last equation. It should be in display mode, but is not.

Expected behavior: As noted above. But:

1. Second formula should be in display mode (Firefox)
2. Poor display in Safari (second equation, superscript)
3. No math display in Chrome

Screenshots: If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• KaTeX Version: [Latest, first used today, July 8, 2020]
• Device: [Desktop]
• OS: [MacOS 10.14.6]
• Browser: [Firefox, Safari, Chrome]
• Version: [e.g. 77.0.1 ; 13.1.1 (14609.2.9.1.3); 83.0.4103.106]

Additional context: I am using KaTeX in an Elm app: See https://github.com/jxxcarlson/meenylatex and also https://minilatex.io See the katex branch, https://github.com/jxxcarlson/meenylatex/blob/katex/example/index-katex.html Am evaluating KaTeX for use in my LaTeX > Html compiler. (Contact: jxxcarlson at gmail) I use MathJax and KaTeX via custom elements. For KaTeX, it is https://github.com/jxxcarlson/meenylatex/blob/katex/example/assets/elm-katex.js

For convenience, here is the code for elm-katex.js:

const init =  async function(app) {

  console.log("I am starting elm-katex: init");
  var katexJs = document.createElement('script')
  katexJs.type = 'text/javascript'
  katexJs.onload = initKatex
  katexJs.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"

  document.head.appendChild(katexJs);
  console.log("elm-katex: I have appended katexJs to document.head");

}


function initKatex() {

  console.log("elm-katex: initializing");

  class MathText extends HTMLElement {

     constructor() {
         // Always call super first in constructor
         super();
       }

    connectedCallback() {
      console.log('katex connectedCallback',this.content )
      console.log('katex format',this.format )
      const displayMode = (this.format == 'display') ? true : false ;
      console.log ('displayMode', displayMode)

      this.attachShadow({mode: "open"});
      this.shadowRoot.innerHTML =
        katex.renderToString(
          this.content,
          { throwOnError: false, output: "mathml", displayMode: displayMode }
        );
    }

  }

  customElements.define('math-text', MathText)

}

[ronkok]

This is a duplicate of #2219, which was fixed by PR #2220 in March. The problem is that we have not had a release issued since September. There are also some bug fix PRs waiting for review, much less release.

[ronkok]

Re: Fonts. KaTeX HTML does require reference to the KaTeX fonts. If you are self-hosting KaTeX, then KaTeX expects the KaTeX fonts to be located in a directory called fonts which is a sibling of the katex.min.css stylesheet. All of those files are available from the tar files and zip files on the KaTeX releases page.