Color picker in bottom draw is clipped, hoist not working

[webdevisme]

Describe the bug
If using a color-picker in a sl-drawer (bottom) the color picker controls are clipped by the drawer boundary, even when using the hoist option for the color-picker.

To Reproduce
Steps to reproduce the behavior:

1. Create a drawer with bottom placement
2. Add a color picker as drawer content
3. Click the color picker to open the picker controls
4. Color picker controls open but is clipped by the top of the containing drawer

Expected behavior
Color-picker is shown in full crossing drawer boundary

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 (WSL)
• Browser Chrome
• Version 89.0.4389.128 (Official Build) (64-bit)

Additional context
Implemented in Svelte framework

[claviska]

This happens because the drawer uses transform, which establishes a new containing block. This is called out in dropdown's docs (which color picker uses internally). If we disable the transform, the color picker (and other hoisted components) will no longer be cropped.

Fiddle: https://jsfiddle.net/caymth7d/ (resize the panel to ensure the color picker appears on top)

Unfortunately, without physically moving the dropdown element out of its containing block, there's no way to solve this. I've started a discussion with the CSS WG about a new property that would help:

w3c/csswg-drafts#5699

Coincidentally, a discussion has also been started on the HTML side regarding <popup> or <popover> element that would also help.

I'm closing this as a wontfix (or really cantfix) as it's a documented limitation, but I'm well aware of it and following both discussions closely so this can be improved as soon as browsers allow it. 😄

I know that's not the answer you wanted to hear, but if you really need this to work you can probably listen for the drawer's show/hide events and add/remove the transform properties manually.

---

For reference, the reason the dropdown element can't be physically hoisted to another location in the DOM is because it's inside a shadow root. By design, removing it would break CSS custom properties, styles, and have other unintended effects. (I previously spent a lot of time experimenting with alternative solutions.)