html web component html content?

Providing innerHTML as a string is seems very error prone while document.createElement is very tedious. Is there a JSX-like way to define web component’s html content?

Instead of doing innerHTML string

class Foo extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `<p>foo</p>`;
  }
}

Do something like

class Foo extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = (<p>foo</p>);
  }
}