Add support for CSS ::part()

[tomayac]

Your current custom styling section can probably be replaced with CSS ::part(), which has great browser support now.

[nolanlawson]

Thanks! I saw shadow parts but somehow missed that the browser support was actually pretty good. This might be a nicer API than CSS variables; definitely worth looking into!

[nolanlawson]

Ah, it's not supported by iOS <=13.3 though... Maybe this would be a good feature for v2. :)

[tomayac]

Note that it doesn't have to be the one XOR the other. You can just support both.

[nolanlawson]

It's a bit tricky to decide which parts to expose. In terms of my own usage, the only "part" that I need access to is the emoji characters themselves (both custom and native), because I convert them to grayscale if the user has enabled grayscale mode (of course, I could just apply grayscale to the whole element, but this has performance impacts, especially for scrolling elements):

https://github.com/nolanlawson/pinafore/blob/7803bdf7975529c07079766112230e18d3e191f1/src/routes/_components/dialog/components/EmojiDialog.html#L78-L83

So I can see the case for adding part="emoji". I'm a bit concerned about the perf hit of adding an extra attribute to every single emoji DOM element, though. But it's definitely possible. I also wonder what other things users would like to have access to, but currently don't.

[ericaig]

But it's definitely possible. I also wonder what other things users would like to have access to, but currently don't.

For me personally, It would be nice if it was possible to make the categories section scrollable horizontally.

This is the style I'm using

emoji-picker {
width: 100%;
--num-columns: 6;
--border-size: 0;
--outline-size: 0;
--indicator-color: var(--ion-color-primary);
--emoji-size: 2rem;
--indicator-height: 0rem;
}

I increased the the emoji size and now I can't see a part of the flag emoji.

Alternatively, it would be nice to have a different variable to change the size of the emojis in the categories section.

[nolanlawson]

Hmmmm, I can see two potential solutions:

• just add overflow-x: auto to the categories section
• as you say, add a separate variable to change the category size

I'm a bit more in favor of the second one since I think it's a bit unintuitive for users to need to scroll that section.