CUSTOMIZE HTML STRUCTURE: Is it possible to add elements with out a lot existing?

[BillyFigueroa]

Summary

I would like to modify header-menu.ts to add an icon that doesn't exist in the component and there isn't a slot for this

This (below) is what I want. I was able to do this using the svelte carbon library by just using the markup generated by the components but I would like to know if this is possible with web components because I would like to make the switch

This is what the base component looks like

To give some context, here is what what component looks like...

<ul role="menubar" class="bx--header__menu-bar">
  <li role="none" class="bx--header__submenu" bind:this={ref}>
    <a
      on:click={() => (expanded = !expanded)}
      role="menuitem"
      tabindex="0"
      aria-haspopup="menu"
      aria-expanded={expanded}
      aria-label="Menu"
      href="/"
      class="bx--header__menu-item bx--header__menu-title"
      style="z-index: 1;"
      data-testid="header__select-menu-action-{title.toLowerCase()}-test-id"
    >
      {#if withIcon}
        <div
          class="header__select-icon"
          data-testid="header__select-icon--{title.toLowerCase()}-test-id"
        >
          <slot name="account-icon" />
        </div>
      {/if}

      {title}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
        fill="currentColor"
        preserveAspectRatio="xMidYMid meet"
        width="16"
        height="16"
        aria-hidden="true"
        class="bx--header__menu-arrow"
      >
        <path d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"></path>
      </svg>
    </a>

    <ul
      role="menu"
      aria-label="Menu"
      class="bx--header__menu"
      data-testid="bx--header__menu-test-id-{title.toLowerCase()}"
    >
      {#each items as item}
        <li role="none">
          <a role="menuitem" tabindex="0" href="/" class="bx--header__menu-item">
            <span class="bx--text-truncate--end">{item.title}</span>
          </a>
        </li>
      {/each}
    </ul>
  </li>
</ul>

Since web components are real elements, the browser displays their source exactly how they were defined. So <header-menu> displays as <header-menu> and the markup is not generated i.e. <div class="cds--header-menu">...</div>. I have tried to grab the pieces of the shadow dom and pieced the component together and also tried just copying the html returned in the component file but I could not get it to work

Can someone recommend a way to do this? is it even possible? It seems Lit only allows you to extend styling and not structural pieces of a component

I hope I was clear in my question. Thanks

Relevant information

No response

Name and organization

Billy Figueroa

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues