Fragment (empty) tag support

[thescientist13]

Summary

One rule with JSX is that there can only be one top level node in the render tree.

export default class Header extends HTMLElement {

  connectedCallback() {
    this.render();
  }

  render() {
    return (
      <header>
        <nav>...</nav>
      </header>
      <h1>Welcome to my website!</h1>
    );
  }
}

customElements.define('app-header', Header);

Details

The "fragment" wrapping tag convention can effectively act as a pass through tag that wont be part of the rendered output, but helps from a quality of life perspective when authoring JSX

export default class Header extends HTMLElement {

  connectedCallback() {
    this.render();
  }

  render() {
    return (
      <>
        <header>
          <nav>...</nav>
        </header>
        <h1>Welcome to my website!</h1>
      </>
    );
  }
}

customElements.define('app-header', Header);