Maintaning Same-Level Elements in Framework7 Core

Hello,

I’m trying to create a component using registerComponent in Framework7 Core, I want the subnvabar, toolbar and page-content elements to be at the same level without the need for a wrapping div, which is not what i want. Is it possible to have a usage similiar to the empty <></> container in React?

import Framework7 from "framework7/lite-bundle";

const DataPageComponent = Framework7.registerComponent(
  "data-page",
  (props, {$h}) => {

    return () => $h`

    <div class="subnavbar">
      <div class="subnavbar-inner">
          <div class="segmented">
            <a href="#tab1" class="button button-active">Tab 1</a>
            <a href="#tab2" class="button">Tab 2</a>
            <a href="#tab3" class="button">Tab 3</a>
          </div>
        </div>
      </div>
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
          <a href="#" class="link">Link 3</a>
        </div>
      </div>
      <div class="page-content">
        
      </div>
 `
  }
);

export default DataPageComponent;

Custom elements in Framework7 Core allow only one root element