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 -->

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(;
    const id = search.get("id");
    const job = await this.getJob(id);
    this.innerHTML = `
      <div class="content" part="content">
          <!-- form fields -->

Here’s how it looks on frontend. Screenshot of dev tools showing using web components internal methods with onclick

What do you think? Does it have any drawbacks?