example.md

For authenticated users, you'd leave what you have, except get rid of the tmp-login-link.

For anonymouse users, instead of:

<pfe-navigation>
  <rh-account-dropdown slot="account" tmp-login-link="javascript:document.dispatchEvent(new Event('keycloakRhdLogin'));" tmp-logout-link="javascript:document.dispatchEvent(new Event('keycloakRhdLogout'));" lang="en" pfelement="" class="PFElement" type="content" login-link="javascript:document.dispatchEvent(new Event('keycloakRhdLogin'));"></rh-account-dropdown>
</pfe-navigation>

which produces:

pfe-navigation
  - shadowRoot
    - a[href="javascript:document.dispatchEvent(new Event('keycloakRhdLogin'));"]

While you could technically reach into the shadow root and attach a click listener, it'd feel brittle to me.

You could do:

<pfe-navigation>
  <div slot="account">
    <button class="myCoolClass">
      <pfe-icon icon="web-icon-user" pfe-size="md" aria-hidden="true"></pfe-icon>
      Login
    </button>
  </div>
</pfe-navigation>

which produces:

pfe-navigation
  - button.myCoolClass

So no shadow root, so in any old JS file you could add a click listener, and it'd be styled the same.