<sl-tooltip>(, <sl-dropdown>) stylability regressions due to the new <sl-popup> in 2.0.0-beta.80

[CetinSert]

What issue are you having?

<sl-popup> introduced a new level of #shadow-root that made parts that were stylable in .79 unstylable.

---

sl-tooltip::part(base) { opacity: .5; }

• ✔️ .79 used to work for both the arrow and the content
• ❌ .80 does not work for either; arrow cannot be reached at all without exportparts; content is now ::part(body)

---

✔️ .79 DOM

<sl-tooltip>
  #shadow-root
    ⋯
      <div part=base ⋯> <!-- display: block -->
        <div class=tooltip__arrow ⋯>
        <div class=tooltip__content ⋯>

❌ .80 DOM

<sl-tooltip>
  #shadow-root
    <sl-popup part=base ⋯> <!-- display: contents --> <!-- thus opacity does not apply -->
      #shadow-root
        ⋯
        <div part=popup ⋯>
          ⋯
          <div part=arrow ⋯> <!-- inaccessible without exportparts on sl-popup -->
      ⋯
      <div part=body ⋯> <!-- display: block -->

---

Describe the solution you'd like

Please review and restore stylability in the components that now use <sl-popup>.

Components that use <sl-popup> in .80:

• <sl-tooltip>
• <sl-dropdown>

For the <sl-tooltip> case, perhaps this might help:

<sl-tooltip>
  #shadow-root
    <sl-popup part=base ⋯ 𝗲𝘅𝗽𝗼𝗿𝘁𝗽𝗮𝗿𝘁𝘀="popup arrow"> <!-- add this? -->
      #shadow-root
        ⋯
        <div part=popup ⋯>
          ⋯
          <div part=arrow ⋯>
      ⋯
      <div part=body ⋯>

Describe alternatives you've considered

None. Asking for your help in looking into this.

[CetinSert]

Here is a reload-free playground for: exportparts 👈🏻

[CetinSert]

With exportparts in place, #854 can be trivially corrected well before 2372309 reaches us in .81. You can see this below and our playground now uses this as a temporary fix.

---

Jump to a future where exportparts is in place:

P = [...document.querySelectorAll('*')].flatMap(e => [...(e.shadowRoot?.querySelectorAll?.('sl-popup') ?? [])]);
P.forEach(p => p.setAttribute('exportparts', 'popup'));

Address #854 in .80 without 2372309:

sl-tooltip::part(popup) { z-index: var(--sl-z-index-tooltip); }

[CetinSert]

@claviska – In addition, I have realized that I also need a pointer-events rule as a temporary hack to address another minor, not yet documented regression due to <sl-popup> refactoring in .80:

sl-tooltip::part(popup) { z-index: var(--sl-z-index-tooltip); pointer-events: none; }