Do you use inline event handlers inside Web Components?

At my previous job, I primarily worked with vanilla Web Components utilizing shadow DOM. What we generally did is to call web components internal methods declaratively like this with inline hanlders.

class MediaLibrary extends HTMLElement {
  doSomething () => {
    // ...
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <-- other elements -->
      <button 
        type="button" 
        onclick="this.getRootNode().host.doSomething(this)"
      >
        Submit
      </button>
    `;
  }
}

In my current side project — another vanilla Web Components project, yay! — for some page components, I decided to not use shadowDOM as I’m using Trix Editor inside the page, and I need to allow Trix Editor CSS to cascade into my page.

Here’s an example of the current approach:

export default class EditJob extends HTMLElement {
  static tagName = "edit-job";
  static define() {
    customElements.define(EditJob.tagName, EditJob);
  }

  updateJob = (event) => {
    // ...
  };

  async connectedCallback() {
    const search = new URLSearchParams(location.search);
    const id = search.get("id");
    const job = await this.getJob(id);
    this.innerHTML = `
      <div class="content" part="content">
        <form 
          method="post" 
          onsubmit="this.closest('${this.localName}').updateJob(event)"
        >
          <!-- form fields -->
        </form>
      </div>
    `;
  }
}

Here’s how it looks on frontend.

What do you think? Does it have any drawbacks?