The new stylable <select> element
We're finally getting a <select> element we can fully control with CSS! A bunch of other stuff needed to be added to the platform to make it work, and the good news is we can use a lot of them independently of <select>.
Resources:
- Chrome's article on the new
<select>, and how you can provide feedback. - The CSS appearance property. Nope, I still don't know what it does.
- The Popover API.
- "On popover accessibility: what the browser does and doesn’t do" by Hidde de Vries and Scott O'Hara.
- The CSS anchor positioning API.
- The previous spatnav spec effort.
- The
hiddenattributeuntil-foundvalue (sorry, I saidif-foundin the episode). - The CSS element function.
- Timing of cloning for the
<selectedoption>element. - Animating to height auto.
- The new entry-exit animation feautres.
- The proposed
commandandcommandforattributes which give buttons declaritive activation behavior.
Transcript
- Jake:I think I'm ready. I think I'm good to go.
- Surma:On a scale of 1 to 10, how rusty do you feel right now?
- Surma:You know, we're on a schedule with recording. Kinda.
- Jake:Are we?
- Surma:We've been pretty good. Like, plus minus a week or something.
- Surma:And yet I feel rustier than ever every time we do this.
- Jake:Yeah, I mean, we're a little bit behind compared to our usual schedule because, well, we both got ill.
- Surma:Yeah. Good.
- Jake:It wasn't Covid.
- Jake:Well, I don't know about that, because it knocked me out for a week.
- Jake:Like, I couldn't think properly. It had all the downsides of Covid, but without the validation.
- Surma:Ah, there is, like, a bit of, like,
- Surma:oh, it's Cove and everybody just nods in understanding, isn't it?
- Surma:I feel like, also, COVID is exempt from the man flu.
- Jake:Yeah. And, like, I know there are other illnesses out there.
- Jake:It's not like when Covid arrived, all the other illnesses felt so inadequate by comparison that they just vanished out of existence, right?
- Jake:So, I maybe had regular flu, right? I don't know.
- Jake:But I felt guilty not working because the little test was telling me, you're fine, mate.
- Surma:Any other flu. You get man flu labeled.
- Surma:Which, you know, maybe correctly so, I do not know.
- Jake:Exactly.
- Jake:Yes.
- Surma:But, yeah, I feel like, you're right!
- Surma:When you can say, I have COVID, everybody goes,
- Surma:oh, yeah, you just, you do your thing. You recover quickly.
- Jake:So, my start-up idea, and you can invest if you want, is a lateral flow test for everything.
- Jake:So, like, you get your two red stripes if...
- Surma:Any liquid hits the stick.
- Jake:Well, no, no, no, if you were ill enough to justifiably feel sorry for yourself and lie on your sofa.
- Surma:Right, so it's lateral flow for fragile masculinity.
- Jake:That's the rule.
- Surma:I like it. I'll invest.
- Jake:Exactly. Yeah.
- Jake:I guess it is a man flu or a person flu system.
- Jake:But, yeah, that just tells you, yeah, mate, you're ill. You're properly ill.
- Jake:Just take the day off. Go play PlayStation. Guilt-free. That's what I want.
- Surma:That seems, yeah, I want that in my life as well. Ship it.
- Surma:No, we should do an intro.
- Surma:You wanted to make this more professional.
- Surma:You told me off last time.
- Jake:Oh, we haven't even done the intro.
- Jake:Look, okay.
- Jake:Well, we've talked a bunch now.
- Surma:No, no, we're going to play the music.
- Jake:Are we going to edit this?
- Surma:And we're going to, people are going to hear me say,
- Surma:we should play the music now.
- Surma:Then we're going to play the music.
- Surma:And then we do the intro.
- Surma:We do like, you know, like some of the TV shows who, like, do the,
- Jake:No.
- Surma:like a little intro, then the actual theme plays.
- Surma:And then it goes like two weeks earlier.
- Surma:And then the actual story starts.
- Surma:And I think that's what we should do.
- Surma:Rope them in with a nonsense anecdote.
- Surma:That's totally how podcasts work, right?
- Jake:Fine. Roll the music.
- Jake:I heard my own voice going, do-do-do-do-do-do, like it was just nondescript music.
- Surma:Which music are you hearing in your head right now?
- Jake:You know that system you were talking about where, like, you know, they would have a bit of the show and then the intro sequence?
- Surma:Wow.
- Jake:And then that pattern actually came about from U.S. TV, where they would have an advert break straight after the intro.
- Surma:That's brutal.
- Jake:I know. I only learned this recently. I'm sure people in the U.S. were aware of it, but, you know.
- Jake:Anyway, you were about to do a professional intro, and I'm not going to stop you any longer.
- Surma:Ladies and gentlemen, welcome to OTMT.
- Surma:My name is Surma.
- Surma:And this is a podcast.
- Jake:My name is Jake.
- Jake:Yes, thanks, Shopify, for letting us do this, as usual.
- Surma:It is nice.
- Surma:Yeah.
- Jake:It's nice of them, isn't it? It's just nice. Everyone's nice.
- Surma:Yeah.
- Jake:Should we talk about the web now?
- Surma:Why not?
- Surma:Let's go.
- Jake:All right, all right.
- Jake:So, I wanted to talk about the new stylable select element on the web.
- Jake:It's something we've all wanted for years, 20 years, yeah.
- Surma:20 years.
- Surma:Yeah.
- Jake:And it's actually close now, like, for real.
- Jake:Like, there's an implementation in Chrome Canary, and it's ready for feedback.
- Surma:Ooh.
- Surma:But how stylable is stylable?
- Jake:It's happening.
- Surma:What?
- Jake:Like, completely.
- Jake:I know, I know.
- Jake:And it's not without its rough edges and weirdness, and I will get to those, because it's fun.
- Jake:But I do think it's actually a great thing, and part of the story, the interesting part of the story for me,
- Jake:is all of the little lower-level features that we've gotten along the way.
- Surma:So they, they, they did the bill.
- Surma:It's not just, you know, like,
- Surma:Scrolling to facts.
- Surma:Boom, high level.
- Surma:Nothing in between.
- Surma:You only can link to scrolling and do stuff.
- Surma:But did they actually build the layers in between an X?
- Surma:And I'm giving us those as well.
- Surma:That is nice.
- Surma:So basically, because I know this work has been going on for a long time, the kind of
- Jake:Exactly.
- Jake:I've counted 10 lower-level features that are usable outside of select,
- Jake:but are used by the select, or you would typically use it with the select thing,
- Jake:and were probably created with it in mind.
- Surma:hope I would have hearing that is that the select element is the guinea pig and the next
- Surma:ones will maybe, hopefully come about quicker because now the lower level primitives have
- Jake:Yes.
- Jake:Absolutely, and there's patterns that have been established.
- Surma:already been designed and established.
- Surma:I have so many questions, but I'm going to let you set the scene first.
- Jake:Oh, I'll set the scene.
- Jake:The select element.
- Jake:Look, we've all made one.
- Jake:You've seen them.
- Jake:We've coded them.
- Jake:You get a select element, and then inside, you've got a bunch of options,
- Surma:It selects things.
- Surma:Oh, I used to use it quite a lot.
- Jake:potentially in opt groups, you know, or not, whatever.
- Jake:The user presses the select button thing,
- Jake:Really?
- Jake:Yeah.
- Jake:Yeah, that's why it's rubbish, because you have to ctrl or shift click, right?
- Jake:That's why no one uses it.
- Jake:Why is that?
- Surma:Well, not, I haven't done recently, but I know because it suddenly turns from like a
- Jake:Because it's a weird thing.
- Jake:It's weird.
- Jake:It's weird.
- Surma:drop down into a box and you can like control or shift click multiple things, right?
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Jake:It's weird.
- Surma:Now that you say that, I don't even know what that looks like on mobile.
- Jake:Oh, that's a good point.
- Jake:I have no idea either, because no one uses it, because it's shite.
- Jake:Okay, but when it's a single select, it kind of renders like a dropdown.
- Jake:And the advantage of the way it works, it's very declarative,
- Surma:Yeah, infamously on iOS, you get one of the, that's still like one of them, like more skeuomorphic
- Jake:is the user agent can render it however it wants,
- Jake:and it tends to be rendered in a way that fits in with the operating system
- Jake:and with the device.
- Jake:Do they still do that?
- Surma:leftovers where it's almost like on little wheel drums where you select the number or
- Surma:the option that you want.
- Surma:I don't quote me on it, but I think so.
- Jake:That's interesting.
- Jake:And on Android, it does show as a kind of full screen-ish overlay, right?
- Jake:But even on desktop, it looks like part of the OS,
- Jake:and the popover thing can escape the iframe it's in.
- Jake:It can even escape the browser window it's in.
- Jake:Like, it's got these kind of superpowers by being sort of
- Jake:an operating system level kind of thing.
- Surma:Yeah.
- Surma:And the fact that it is looking like the operating system is actually what people often
- Surma:dislike because they have, you know, a whole design system that somebody painstakingly
- Surma:designed and implemented.
- Surma:And then somebody wants to select and they're like, well, can't do anything about that.
- Jake:Do you want an ancient fact?
- Surma:Oh yeah.
- Jake:I feel like this should be a recurring segment.
- Surma:Grandpa Jake tells war stories from Brazzer land.
- Jake:Yeah, let's go with that.
- Jake:Welcome to Grandpa Jake tells stories from Browserland.
- Jake:Excellent, cool.
- Jake:In Internet Explorer 6 and earlier, select elements were rendered
- Jake:by the operating system, not by the browser engine,
- Jake:and it was a separate rendering pass, right?
- Jake:Meaning select elements were on top of everything else,
- Jake:like the z-index was.
- Surma:Lovely.
- Surma:Oh, it's like the rock, paper, scissors.
- Jake:The only thing that could render on top of a select were these other things
- Jake:that kind of had this same second pass logic,
- Jake:one of which was an iframe.
- Jake:Or rather, the bits of the iframe that intersected with the select,
- Jake:like the select wouldn't render there.
- Jake:But IE6 did have a code path to allow things to render
- Jake:on top of iframes.
- Jake:It was kind of like that logic was just missing from select,
- Jake:but it was there for iframe.
- Surma:Of rendering order.
- Jake:Well, here's the thing.
- Jake:So if you wanted to render a div on top of a select,
- Jake:like you were creating an overlay or a popup or something like that,
- Jake:what you would do is put an empty iframe behind the div
- Jake:to prevent the rendering of the select underneath.
- Surma:That's brilliant.
- Surma:I love that so much.
- Jake:That was another episode of Grandpa Jake's Ancient Browser Stuff.
- Jake:I can't remember what we were calling it.
- Surma:That is genuinely amazing.
- Surma:I love that.
- Jake:So that's select in general.
- Jake:The bad part is you can't control the styling
- Jake:because they're rendering differently everywhere,
- Jake:so how even would you?
- Jake:So if you wanted a dropdown that looked slightly different,
- Jake:you were creating your own from scratch.
- Jake:Even if you just wanted an image inside the options,
- Jake:like a flag for language select or whatever, some kind of icon,
- Jake:no, you were creating from scratch,
- Jake:and that included all of the accessibility stuff,
- Jake:which is really, really hard,
- Jake:and keyboard interaction is really hard.
- Surma:Well, no, you just don't do the accessibility.
- Surma:The accessibility stuff that we have seen and all the components people have written
- Surma:that do custom selects, isn't it?
- Jake:Exactly.
- Surma:It's like instantly a world of awful because suddenly you are in get bounding, climbing
- Jake:Exactly.
- Surma:rack territory, absolute positioning, Z index fighting, and all that jazz just to get something
- Surma:that really, you know, I just wanted an icon next to my dropdown option.
- Jake:Yeah, and you're right. No one gets it right.
- Jake:So the Open UI group, they set out to solve this,
- Jake:that they're going to create a select element
- Jake:that had all of the accessibility and interactions built in
- Jake:and allowed for the full and predictable styling.
- Jake:And it's taken years, but we are nearly there.
- Jake:Can't rush art.
- Jake:Can't rush browser standards, that's for sure.
- Jake:So people who might have looked at this effort
- Jake:over the decade or whatever,
- Jake:they might have seen that it was going to be proposed
- Jake:as a new element, like custom select.
- Jake:I can't remember what it was, but that's dead.
- Jake:That's dead now.
- Surma:Oh, but it also means that they have to kind of like shoehorn all the, like, you know,
- Jake:The new plan is to enhance the existing select elements,
- Jake:and this is great because it means
- Jake:these new fancy custom-style select things,
- Jake:they fall back to regular select.
- Surma:the all knobs and levers onto the existing syntax because it needs to gracefully degrade
- Surma:slash progressively enhance for sure.
- Jake:Yes, so it means your rich content and your options
- Jake:will just fall down to text content,
- Jake:which you have to be careful with.
- Jake:But I do think it's actually one of the impressive things
- Jake:about this effort is how they've managed to thread the needle.
- Surma:It's very impressive.
- Jake:Like, yeah, they've looked at what browsers will accept
- Jake:but ignore inside select and option elements
- Jake:and made it work.
- Jake:Yeah, I think it's good.
- Jake:So you need an opt-in, right?
- Jake:Because you need a way to switch it from a normal select element
- Jake:into this whole new world.
- Jake:Yeah.
- Jake:You know what?
- Jake:We're going to talk more about these little opt-in switches.
- Jake:I feel like they are multiplying on the platform.
- Jake:Yeah, I'm going to cover a few of them just in this episode.
- Jake:So if we think about a select,
- Jake:it's kind of two top-level parts, right?
- Jake:There's a button, and that's the bit on the page
- Jake:that displays the currently selected option.
- Jake:But it's just a button, right?
- Jake:It doesn't look like an HTML button,
- Jake:but it's a thing you focus and a thing you press.
- Jake:It's a button.
- Jake:If you give that, via the select element in CSS,
- Jake:appearance-base-select,
- Jake:then it changes the mode
- Jake:and falls to a cross-browser version of that button
- Jake:that is, like, agreed styling.
- Surma:Is this the first occurrence of appearance or did we have that somewhere else before?
- Jake:Appearance is there already, but don't ask me what it does.
- Jake:It's one of those ones that has always been a bit of an enigma to me
- Jake:because, yeah, there's, like, appearance-non, and it...
- Jake:I don't know. It does something.
- Jake:I think it might be something that kind of appeared in ancient days,
- Jake:and it's sort of in a standard noun.
- Jake:Do you know what?
- Surma:Wait to double check.
- Surma:Is this an attribute or a CSS property?
- Jake:CSS property.
- Jake:So you can apply it to all your selects.
- Jake:So, yeah, once you put that CSS on there,
- Jake:you get this, like, cross-user-agent, cross-device button.
- Jake:That kind of looks like a very basic dropdown-select button
- Jake:that we all know and love.
- Jake:You know, it's got the little arrow.
- Jake:It's got the selected item in it.
- Surma:I instantly wish that they would have just called it base because I would love to just
- Surma:do in my style sheet star appearance base that all UI controls will use that base appearance
- Surma:if once we have it for every UI element.
- Jake:And your intent there is exactly why they haven't done that.
- Jake:So if they said, like, right,
- Jake:star-appearance-base means reset all of the form controls,
- Jake:they're not going to ship that
- Jake:for all of the form controls straight away.
- Jake:So they're going to ship that with select, like, or whatever.
- Jake:But then that style is out there,
- Jake:and then when browsers come to do that for date picker
- Jake:or, you know, colour picker or whatever or some other control,
- Jake:they're going to ship, and your page is going to change
- Jake:and probably going to change in ways you don't want.
- Jake:So it prevents a sort of future compact problem.
- Surma:As long as they ship something like that, once every form element has a cross browser
- Jake:I guess, whether that will ever happen or not,
- Surma:standardized look, all new formalins should now have a cross.
- Jake:because you can always add new form elements in the future,
- Jake:but I guess if they've done...
- Jake:Yeah, if they do that for all new form elements as well.
- Surma:Like I think I think that's really nice that now there is basically the signal like we
- Surma:are going to give every standardized interaction element a cross browser agreed look.
- Surma:So you move away from it looks correct for the operating system because I think the benefit
- Jake:Yeah, I agree.
- Surma:of that was never really as big as maybe originally hoped.
- Surma:I could see, you know, like in a world with, you know, installable web apps, there was
- Surma:an element of it's nice that it looks like a native counterpart, but actually almost
- Surma:all apps decide their own button design.
- Surma:So I think, yeah, this is the better direction, in my opinion.
- Jake:The other part of the select is the popover,
- Jake:like the thing that appears when you press the button
- Jake:and goes away when you select an option
- Jake:or press escape or whatever.
- Jake:So you need to opt into the standard rendering of that separately.
- Jake:And that is done via a pseudo element hanging off the select,
- Jake:which is colon, colon, picker,
- Jake:and then in open brackets, or within brackets, select.
- Jake:So it's kind of like a pseudo element function kind of thing.
- Surma:That was bad.
- Jake:And again, this is for the same reason for, you know,
- Jake:they don't want people saying, like, all pickers,
- Jake:I want all pickers to be base style.
- Jake:Like, they want to force you to be saying,
- Jake:I want this to happen for select.
- Surma:Right.
- Jake:Yeah, and again, you do appearance base select on that.
- Jake:The nice thing about it being split is you can
- Jake:just opt into controlling the button
- Jake:and stick with the operating system picker.
- Jake:You cannot do it the other way around.
- Jake:You can't just opt into the picker without opting into the button.
- Surma:That kinda makes sense, I suppose.
- Jake:I guess it comes down to, like, you know,
- Jake:if you're just controlling the picker, I don't know.
- Jake:I don't know. They probably have some good reasons for it.
- Jake:But yeah, fair enough. I'm fine with that.
- Jake:So let's talk about popover.
- Surma:I was gonna ask, don't we have a popover element
- Surma:that recently got designed or something, or am I making stuff up?
- Jake:You are not making stuff up. It's a popover attribute.
- Surma:Nope.
- Surma:Uggghhh.
- Jake:And so, like, almost every element can now have a popover attribute.
- Jake:I think it maybe is actually all elements, but, you know,
- Jake:it only really matters on elements that render.
- Jake:And that means it can be shown as a popover
- Jake:by calling .showPopover.
- Jake:That means it appears on top of everything else.
- Jake:And that uses another feature of the web platform
- Jake:called the top layer,
- Jake:which I think was originally created
- Jake:to support full-screen elements,
- Jake:but it's since used by dialogue elements
- Jake:when they're in modal mode.
- Surma:Right.
- Jake:We use it for view transitions,
- Jake:and popovers appear there as well.
- Jake:There's probably some other features too.
- Jake:They come with, like, focus logic
- Jake:to control focus in expected ways.
- Jake:You can use escape to close them,
- Jake:and it returns focus. It's pretty smart.
- Surma:And you have this anchor positioning as well to position the popover adjacent to a specific
- Surma:corner of another element or something?
- Jake:Yes. So the popover bit...
- Jake:So I should say there's also, on a button element,
- Jake:you can add a popover target,
- Jake:which means, like, clicking the button
- Jake:will toggle or show or hide.
- Jake:You can control that as well.
- Jake:Like, that will control the popover.
- Jake:And that will also create an accessibility link
- Jake:between the button and the popover.
- Surma:That's nice.
- Jake:There's a great article by Hidde de Vries
- Surma:Very good.
- Jake:and Scott O'Hara, which covers all of the accessibility stuff
- Jake:under the hood here, which I'll link to
- Jake:because it's really good.
- Jake:So those features are available cross-browser,
- Jake:like, today.
- Jake:But you just mentioned anchoring,
- Jake:which, yes, like,
- Jake:you want the popover to be linked to the button,
- Jake:typically, but which side of the button?
- Jake:Well, that's kind of down to you.
- Jake:And maybe you want it to, like,
- Jake:appear on the side that has the most space
- Jake:or, like, favor one side,
- Jake:but if it would go out of view, flip it to another side.
- Jake:And yes, CSS anchor positioning
- Jake:gives you that capability.
- Jake:Only in Chrome right now, but it is in stable.
- Jake:And you can use that on any element.
- Jake:That's the nice thing.
- Jake:So the popover stuff, the anchoring,
- Jake:these are features that you don't...
- Jake:They don't have to have anything to do with select,
- Jake:but it is the things that select uses internally
- Jake:with sensible defaults,
- Jake:and you can modify them
- Jake:and use them separately.
- Surma:Yeah, that's really really nice, really nice layering.
- Jake:So any elements that you put
- Jake:inside the select,
- Jake:they end up in the popover.
- Jake:Well, not just options.
- Surma:That makes sense.
- Jake:It means you can use divs as well
- Jake:to help with layout or whatever.
- Surma:So in this opt-in world is then the popover just like basically an element and I can use
- Surma:you know relative positioning, absolute positioning, all that jazz?
- Jake:It will always be in the top layer,
- Jake:so giving it relative positioning
- Jake:isn't going to get you anything,
- Jake:because everything is sort of...
- Jake:Yes, you can. Absolutely.
- Surma:What if I wanted to arrange my select options in a circle?
- Jake:And you're whatever kind of layout you want,
- Jake:you can do there.
- Jake:So there is a downside to this,
- Jake:and, like, you get all of that CSS control,
- Jake:you get to do what you want with it,
- Jake:but because it's just in the top layer,
- Jake:and because you have that control,
- Jake:it can't escape the iframe it's in,
- Jake:and it can't escape the browser window,
- Jake:because that would be a security issue,
- Jake:rendering stuff in another origin,
- Jake:or you're rendering stuff outside of the browser.
- Surma:Right.
- Surma:I guess that makes sense and I think the feasible workaround which I assume is handled
- Surma:automatically that you know if the button with a popover is at the bottom end of the
- Surma:screen the popover will open upwards rather than downwards.
- Surma:So it's really only the scenario that is now problematic, it wasn't problematic before
- Jake:Exactly.
- Surma:if you have a tiny tiny iframe.
- Jake:Or a tiny, tiny browser window, or something like that.
- Jake:Yeah, and so CSS anchoring gives you that,
- Jake:you know, preference of positioning,
- Jake:all of that you control,
- Jake:and there are sensible defaults.
- Jake:Yeah, so it's a kind of minor thing,
- Jake:but it is a notable difference
- Jake:between, like, the new world
- Jake:and the old select implementation.
- Jake:Option elements still represent your options,
- Jake:but they can contain rich content,
- Jake:so images, you know, you can format the text,
- Jake:you can add divs to hang styles off,
- Jake:you can do whatever you want.
- Jake:There is a checked pseudo class on options,
- Jake:and by default that causes the before pseudo element
- Jake:to contain a tick.
- Jake:I think that might change,
- Jake:that's something that's currently being discussed,
- Surma:So again, in my circular layout, how is keyboard input handled?
- Jake:but again, you can override all of that.
- Jake:Even if that is what lands in the user agent stylesheet,
- Jake:you can override it to change something,
- Jake:you know, be whatever.
- Jake:It is not.
- Jake:Well, yes, you're absolutely right.
- Surma:You get up and down, I suppose, right?
- Jake:So you get the accessibility stuff for free,
- Jake:you get keyboard stuff for free,
- Jake:but you just get up and down.
- Jake:So if you have arranged your items in a circle,
- Jake:or in a grid, or horizontally,
- Jake:which a lot of the demos are doing,
- Jake:because it's cool and new,
- Jake:a lot of them don't work.
- Jake:Like, you would have to go with JavaScript,
- Jake:and when left or right is pressed,
- Jake:when you're on this particular option,
- Jake:call focus on a particular different option.
- Surma:I think it's fine.
- Surma:I think, you know, solving all of these things in one go is probably super hard.
- Surma:I think going so the fact that you can select any option with a keyboard, that's the most
- Surma:important thing.
- Surma:The fact that it sometimes is visually unintuitive, like I wouldn't say it doesn't work, it's
- Surma:just unintuitive to go up down when you visually go left and right.
- Jake:Yeah, that's a fair point.
- Jake:By default you will be able to scroll through the items,
- Jake:it might just not be the most expected buttons
- Jake:that you will press.
- Surma:And maybe at some point there is, you know, CSS has this whole spatial navigation thing
- Surma:going on, maybe that can be connected at some point, but I'm super happy that they are taking
- Surma:this approach for the first release of this, where you're just like, you know it works
- Surma:and it is a massive leap to what it was before, so, you know, it's good.
- Jake:Yeah, I'll link to the effort,
- Jake:the previous effort for spatial navigation,
- Jake:there's a spec written,
- Jake:I haven't looked at the spec,
- Jake:so I don't know anything about it,
- Jake:but I know it was done by LG folks,
- Jake:because of course they're on a TV,
- Jake:and they've got up, down, left, right on a remote,
- Jake:so spatial navigation is really beneficial to them.
- Jake:So there was spec efforts,
- Jake:but it hasn't really been touched in,
- Jake:I think, three years.
- Jake:So that's one of the features
- Jake:we haven't got out of this.
- Jake:Alright, that's the popover.
- Jake:The button.
- Jake:So once you've done the opt-in,
- Jake:there's a standard button that you can style,
- Jake:but you can do more.
- Jake:I said before that anything inside the select element
- Jake:appears in the popover,
- Surma:Oh, so that allows you to like to model the state change between is the popover open or
- Jake:there is one exception to that rule,
- Jake:and that's if you put a button element
- Jake:as a direct child of the select.
- Jake:Then it becomes the button.
- Jake:Like the UA rendered one is gone,
- Jake:and just that button you've put in
- Jake:is the button now.
- Jake:Well done.
- Jake:Well yes, so
- Jake:you can use the
- Jake:select open and closed
- Jake:pseudo classes for that,
- Jake:and then control your button
- Jake:within there to flip
- Jake:the arrow position,
- Jake:or some of the colors, or whatever state.
- Jake:Yeah, that's all available to you.
- Jake:And those open and closed pseudo classes
- Jake:are a relatively new thing as well.
- Jake:I don't know if they were created directly for
- Jake:select, but they've been added
- Jake:to select for this.
- Jake:I think they were also on details.
- Surma:So you sounded like it wasn't the intention that you can have basically one button look
- Surma:for open, one button look for closing.
- Surma:What is the intended use case behind replacing the original button with another button?
- Jake:Well, it's just that you can do
- Jake:whatever you want with it.
- Surma:Ah, okay.
- Jake:So with the previous one,
- Jake:it's the content that the UA comes up with,
- Jake:but sure, you can change the background color,
- Jake:the border, and all of that.
- Jake:But with this, you can put
- Jake:whatever text, images,
- Jake:blah, like,
- Jake:it's yours to do whatever
- Jake:you want with.
- Surma:Right.
- Surma:I mean, it's really good flexibility.
- Surma:How do events work in that moment?
- Jake:Well, you've still got the
- Jake:select element is there.
- Jake:So whether the button
- Jake:gets a click event, or whether that's
- Jake:like
- Jake:stop propagation,
- Jake:stop immediate.
- Surma:Because I'm thinking about, you know, in Preact, if people put their on click on one of the
- Jake:...
- Surma:buttons rather than the surrounding selects or like only on one button and then they replace
- Surma:it, but then obviously the other button doesn't have a click listener.
- Jake:Well, you shouldn't have to add a click
- Jake:listener to the button.
- Jake:Because there's no real call to,
- Surma:No, but maybe you want to do something in response to a click, right?
- Jake:because the browser will automatically hook it up
- Jake:to the picker.
- Jake:Oh yeah, so that should work.
- Jake:Whether if you prevent default on the click,
- Jake:whether it stops the popover
- Jake:appearing or not, I don't know.
- Jake:It feels like it should.
- Jake:So I would expect you to get a click on the button,
- Jake:and then obviously it bubbles up to the select as well.
- Surma:I guess I was asking if I put an on click listener on the one button and then this replace
- Surma:mechanism kicks in.
- Surma:Once it's open, I would have to add another click listener to the other button.
- Jake:Oh, no, no, there's only one button.
- Jake:I think this is maybe
- Surma:Oh, yes.
- Jake:where there's a confusion.
- Surma:I think now I follow.
- Surma:So yeah, we should rewind what you were saying.
- Surma:Let me, let me try and see if I got this.
- Jake:...
- Surma:If I understood it right now, you can put a button as a direct child of the select to
- Surma:take complete control of the look of the button.
- Surma:I understood that button only comes in action once the original button has been clicked.
- Jake:Yes, that's where we got confused.
- Surma:Right, so that's basically a special rule for if there is direct child button that becomes
- Jake:No, it's just the thing that appears on the page,
- Jake:the default version of that is gone,
- Jake:and it is now just your button.
- Jake:Is it?
- Surma:that is your signal as a developer.
- Jake:...
- Surma:I want to take control of the select to open the button myself.
- Jake:Yes, exactly that.
- Jake:And are you ready for where
- Jake:things start to get really weird?
- Surma:Oh, yes, absolutely.
- Surma:The clone of the option element was like, that is actually cool.
- Jake:There's a new element
- Jake:called selected option.
- Jake:All one word.
- Jake:Well, no spaces, because it's a tag name.
- Jake:If you put
- Jake:one of those in your button element,
- Jake:it will receive
- Jake:a clone of the contents
- Jake:of the option element
- Jake:that's selected.
- Jake:Well, the clone of the contents
- Surma:Yeah, that is actually kind of clever.
- Jake:of the option element that's selected.
- Jake:Sorry, I have to do
- Surma:Yeah, that has a selected property set to true.
- Jake:some verbal gymnastics here, because
- Jake:it means we've got a
- Jake:selected option element,
- Jake:and a selected option element.
- Jake:So I'm trying to find ways to...
- Jake:Because there's the thing with the tag name,
- Jake:selected option, and then there's the thing
- Jake:with the tag name, option, which is selected.
- Jake:So...
- Surma:Interesting.
- Jake:Excuse me while I sound not entirely human
- Jake:while I try and make
- Jake:the two sound very different.
- Jake:It's a light DOM clone
- Jake:of the contents.
- Jake:I said in previous episodes
- Jake:it's a bit weird and unusual for elements
- Jake:to modify their own attributes
- Jake:in response to user interaction,
- Jake:but it does happen with dialogue
- Jake:and details. They both
- Jake:add and remove their open attribute.
- Jake:There's also the
- Jake:hidden attribute, if you set that to
- Jake:if found.
- Surma:Yeah, I'm surprised that there wasn't.
- Jake:That's an indication to the browser that if you
- Jake:Control-F and
- Jake:it thinks the content is inside
- Jake:that element, it will
- Jake:remove the hidden attribute automatically
- Jake:from that element. So, you know,
- Jake:there are cases where browsers
- Jake:will modify elements themselves.
- Jake:It's just very rare
- Jake:and weird. But this takes it to a whole
- Jake:new level because it's a whole
- Jake:clone in the light DOM that's sort of
- Jake:dumped into this other element.
- Surma:Maybe there were attempts and it didn't work out, but my immediate thought would have been
- Surma:slots.
- Surma:Right?
- Surma:Like, like in Shadow Dome, but maybe we can have slots outside Shadow Dome, because that
- Surma:would have also maybe made sense here?
- Jake:So there isn't the concept
- Jake:of projecting an element into two places.
- Jake:And that's
- Jake:the problem we've got here. It's because when
- Jake:you've selected an element and you open
- Jake:the select again, you're seeing
- Jake:that item in two places. You're seeing it in
- Jake:the popover and
- Jake:in the button.
- Surma:That's true.
- Jake:And there is the
- Jake:elements function in CSS, which only
- Jake:Firefox supports, which lets you create
- Jake:a bitmap copy of another
- Jake:element, but that means it can't
- Jake:be separately styled.
- Jake:Whereas this full clone can be
- Jake:independently styled. It can receive
- Jake:its own events.
- Surma:I was just gonna say, it is actually quite flexible, almost elegant, in that if an option
- Jake:...
- Jake:...
- Surma:is the selected one, you can style it separate, you can style the appearance of inside the
- Jake:...
- Jake:...
- Surma:select drop-down button thingy separately, because it is now a full clone.
- Jake:...
- Jake:...
- Jake:Exactly. But it gets funkier.
- Jake:The current plan, and this is under
- Jake:active discussion, is
- Jake:that if you modify
- Jake:the DOM of the option that's selected,
- Jake:it triggers the cloning steps
- Jake:again synchronously.
- Jake:So if you create a div
- Jake:and you put it in the
- Jake:option that's selected, and you give it
- Jake:a class name, and you give it some
- Jake:text, and you
- Jake:change the inline style,
- Surma:Of course, you wanna immediately argue it doesn't have to be synchronous, but I guess
- Jake:that's how many? One, two,
- Jake:three, four. That's four
- Jake:modifications. So that's four times
- Jake:the entire contents of that option
- Jake:is cloned and inserted
- Jake:into the selected option element, replacing
- Jake:whatever content was there. Four
- Jake:whole clones.
- Surma:for certain logic, it might have to be.
- Jake:Right, and that's one of the things
- Jake:they're discussing, that should it be debounced,
- Jake:but things are sort of tending towards synchronous
- Jake:right now. But it also means that if you're
- Jake:animating something in the selected
- Jake:option using, like, GreenSock, or
- Jake:Anime.js, whatever, these libraries
- Jake:they modify the style object
- Jake:every frame, which is
- Jake:reflected to the style attribute,
- Jake:which is a DOM change, which is going to trigger
- Jake:the cloning operation every frame.
- Jake:And it's not just of the element you're modifying,
- Jake:it's everything in the
- Jake:option.
- Surma:But animation is always performance foot gun work, like people who do this need to know
- Surma:what they're doing, right?
- Surma:Like I am firmly of the opinion to give sharp tools to developers, let them run with scissors.
- Jake:Well, this is the thing, and if you were
- Jake:animating rotation and opacity,
- Jake:that's two writes to the style object,
- Jake:which is two writes to the style attribute,
- Jake:so that's two DOM modifications
- Jake:which triggers the cloning algorithm twice
- Jake:per frame, and
- Jake:on and on it explodes, you know?
- Jake:So,
- Surma:Yes.
- Jake:also, if you've got a CSS animation
- Jake:on an element,
- Jake:that starts when the element
- Jake:is, like, mounted.
- Jake:Like, when it's in the document.
- Surma:I was gonna ask because, you know, what about, you know, old school animated GIFs or even
- Jake:And if this thing is being recreated
- Jake:a lot, people, like, using
- Jake:React might have experienced this, the CSS
- Jake:animation will appear to reset,
- Jake:because it's a new element. And
- Jake:if it's a custom element that has,
- Jake:that's going to perform a fetch on construction
- Jake:or insert, like, this is going to be happening
- Jake:because of the clone, it's going to be happening
- Jake:time and time again.
- Surma:you know, video tags?
- Jake:Oh, exactly, yeah, you'll lose,
- Jake:and that's the thing, if
- Jake:any of the state is not represented
- Jake:by attributes, such as a canvas,
- Jake:such as the video playback position,
- Jake:then that's going to be lost.
- Jake:So, yeah,
- Jake:have fun. I think it's okay,
- Jake:the cloning thing, but I
- Jake:think the way it clones everything
- Jake:on any modification
- Jake:synchronously, one of those things needs to
- Jake:change. It's not quite right.
- Jake:I would prefer a pattern where
- Jake:if you modify something in the selected
- Surma:Now, here's a curveball of doom.
- Jake:option, it should make the
- Jake:same change on its related clone.
- Surma:Remember a couple episodes ago when we were talking about VDOM in the browser?
- Jake:Yes.
- Surma:What if instead of doing a full clone and effectively overwriting the child tree, it
- Surma:would do a VDOM diff and actually only change the attributes and properties?
- Jake:Yeah, that's a big
- Jake:curveball. I just think it would be simpler to say,
- Jake:like, it knows when it's cloned everything,
- Jake:and it can map, you know,
- Jake:the contents of the option to its clones.
- Jake:So if you edit an attribute
- Jake:in the selected option,
- Jake:it just sets the
- Jake:same attribute, the same name on the clone.
- Surma:So like basically replace the actions that are being done in one element to the other
- Surma:element, which is kind of, it's kind of what I was saying.
- Surma:It's just like, I saw the bridge to like, you know, VDOM diffing, which is the same
- Surma:effect, just more complicated, but yeah, true, yes.
- Jake:We've done this in Shopify, right?
- Jake:This is how Shopify extensions work.
- Jake:Something happens in the...
- Jake:We've got a virtual DOM in a worker.
- Jake:It's not a virtual DOM in the React sense.
- Jake:It feels like a real DOM, but when
- Jake:you do stuff in there, it's replaying the actions
- Jake:somewhere else, like
- Jake:through a security layer.
- Jake:I think that's what should happen.
- Surma:And maybe it will, I suppose in terms of, you know, with my very basic specking head
- Surma:on, a shallow or a deep clone is much easier to spec right now when they're already trying
- Jake:No.
- Surma:to spec all the other stuff, then also inventing, because that's not a thing anywhere on the
- Surma:platform, right?
- Jake:No. I mean, this whole
- Jake:cloning thing is new anyway. I mean,
- Jake:cloning isn't new, but doing that on
- Jake:user interaction is new.
- Jake:But yes, there is an existing algorithm
- Jake:for cloning elements, so
- Jake:they're leaning really heavily on that. So it would
- Surma:Maybe it's a step to, you know, maybe it's something they do, let's post MVP kind of
- Jake:be a lot more spec work to do the, you know,
- Jake:synchronizing the two trees,
- Jake:but it's not a lot. Like, as I've written
- Jake:it before, it's not...
- Jake:It's okay. It's more than what they've
- Jake:got currently, but I think it would remove
- Jake:a foot gun. Maybe.
- Surma:thing.
- Surma:I would understand if, if they did that, but.
- Jake:But I would say the good news
- Jake:is this is entirely opt-in.
- Jake:Using this selected option thing,
- Jake:you could say, well, I'm using
- Jake:React, so I'm just going to listen for
- Jake:the onChange event on the select,
- Jake:and I'm going to update the contents of my button.
- Jake:You know, and in
- Jake:that case, you're not limited to
- Jake:the DOM structure of the
- Jake:option. You can do whatever
- Jake:you want, and it's fine.
- Jake:So,
- Jake:and I think that's probably what I would do
- Jake:if I was using a framework already, but
- Surma:Yeah, and it's really nice that they have a pattern where it's opt-in, like you can
- Jake:whatever. It's nice that there
- Jake:is a non-JavaScript version there.
- Surma:choose to do the selected option tag, or if you just don't have it, then none of this
- Surma:is a problem because you either don't want the select option to be shown, which would
- Jake:Exactly.
- Surma:be a bit odd, or you're taking matters into your own hands.
- Jake:But that's not all,
- Jake:right? Let's say you want
- Jake:your fancy new select to animate.
- Jake:So, a basic thing for it to do would
- Jake:be to animate from height zero to
- Jake:its full height.
- Jake:You could do this as a clip path, but let's say we're
- Jake:just going to animate the height so the
- Jake:box shadows and the borders do the
- Jake:right thing, whatever, and we'll, you know,
- Jake:optimize the layout so it's not too bad.
- Jake:You could slap a CSS animation
- Jake:on the popover element.
- Jake:CSS animations run when an element appears,
- Surma:Wait, with CS animations, if I just say just the only keyframe I specify is from, oh, interesting.
- Jake:so you could do that.
- Jake:But you can't animate to an intrinsic
- Jake:size in CSS.
- Jake:Like, you can't animate to height auto.
- Jake:You can't animate to height
- Jake:minContent or fitContent or
- Jake:maxContent.
- Jake:It doesn't work.
- Surma:I did not know that.
- Jake:Yeah, it needs to be a number
- Jake:at the other end for it to work.
- Jake:Except now you can,
- Jake:and there is an opt-in, another opt-in.
- Jake:Are you ready? In CSS,
- Surma:Wait, is that the CSS function or property or?
- Jake:if you do interpolate-size
- Jake:colon
- Jake:allow-keywords,
- Jake:ding ding, that's it.
- Jake:And this one
- Jake:inherits, so you can just put it on root
- Jake:and be done with it.
- Jake:Now it just works.
- Jake:There's also
- Jake:calcSize,
- Jake:which you can say, like,
- Jake:yes, sorry, it is a CSS function.
- Jake:You're right. And it means you can say,
- Surma:Ah.
- Jake:like, give me autoHeight divided by
- Jake:2, or multiplied by 2, or
- Jake:minContent.
- Surma:That is lovely.
- Surma:Oh, that's going to be very useful in so many places.
- Jake:Yes. So there's sort of two ways to do
- Jake:the same thing. Like a simple way,
- Jake:and then a way that lets you do
- Jake:maths.
- Surma:That then together with clamp and all those shenanigans, is it always in reference to
- Surma:the element that it's being used on, or could I even do calc size on like from another element
- Jake:It's the same element,
- Surma:and use the result?
- Surma:Nah, that's fine.
- Jake:unfortunately.
- Surma:That makes sense.
- Surma:I guess otherwise you have the same problem as they did with resize observer, you could
- Jake:Yeah. You might be able to,
- Surma:have circular layout dependencies.
- Surma:Oh, that's fine.
- Jake:I guess you could do it relative to a parent
- Surma:That makes sense.
- Surma:I guess otherwise you have the same problem as they did with resize observer, you could
- Jake:by the parent setting a custom property,
- Surma:
- Jake:but...
- Jake:Yeah, that's always the problem, isn't it?
- Jake:This isn't a select feature, again. Like, you can use this everywhere.
- Jake:It's Chrome only right now, but it'll
- Jake:come to other browsers next year, I guess,
- Jake:maybe, hopefully.
- Jake:Who knows? Oh, okay, so
- Jake:what about the opposite side of the animation?
- Jake:So, animating out.
- Surma:Well, it's like you said, when a new element appears in the DOM, it's CS animation start
- Jake:And this is always the harder one,
- Jake:because,
- Jake:yeah, because of displaying none,
- Jake:and it being removed from the top layer
- Jake:immediately.
- Surma:playing.
- Surma:And so you can just basically put a fade in animation on an element.
- Surma:And once attached to the DOM, you know, animation will play.
- Surma:You can set it.
- Surma:It's a repeat to one.
- Surma:You can listen to the transition or animation and events and just go about your life.
- Jake:Exactly.
- Surma:But when you remove a DOM element from the tree, it's gone.
- Surma:There's no way to intercept that and keep it on screen to fade it out or anything like
- Surma:that.
- Jake:There's a solution for it as well.
- Jake:I mean, one way is view transitions,
- Jake:but if you're just
- Jake:making something display none and removing
- Jake:it from the top layer, there's another way of handling it.
- Jake:You can set a CSS animation
- Jake:or transition on the display property,
- Jake:which delays
- Surma:Wait, I thought discrete values could already transition, they just flip at 50%.
- Jake:it applying
- Jake:if you're animating out.
- Jake:So,
- Jake:you need to opt into this.
- Jake:It just works with animations,
- Jake:but with transitions, you need to use
- Jake:transition-behavior
- Jake:allow-discrete,
- Jake:which allows discrete values to transition.
- Jake:It's on all discrete values, but...
- Jake:No, that's how it works with animations.
- Surma:Oh.
- Jake:They don't work with transitions
- Jake:until you flip this bit,
- Surma:Flip a bit.
- Jake:and then it's fine.
- Jake:But when something is transitioning
- Jake:to display none, it converts
- Jake:to display none at the very end,
- Jake:but it becomes inert during
- Jake:the whole period.
- Surma:Very good.
- Jake:So that means that screen readers,
- Jake:keyboard, mouse, it's gone.
- Jake:It avoids the accessibility
- Jake:issues, and it means you can't
- Jake:double-click on a button inside that thing
- Jake:that you've told to go away.
- Jake:This is probably the last feature
- Jake:I got in to Web Standards
- Surma:I mean, that's a really good improvement.
- Jake:before I left Google. I had to get
- Jake:testimony from a bunch of framework
- Jake:developers to say that this is important
- Jake:and this would be a
- Jake:foot gun if it's not done.
- Jake:So that is one of the features
- Jake:that has landed.
- Surma:The only thing I wish there was that there's some way to say, like, if a DOM element gets
- Surma:removed, remove it from the JavaScript facing API, but keep it around until the animation
- Surma:is done.
- Surma:Especially if a framework just removes an element, then the just just to see as animation
- Jake:You're pretending like I never created
- Jake:view transitions, Sama, actually?
- Surma:can play.
- Jake:But that was
- Surma:But those are just for transitioning views, isn't it?
- Jake:one of the problems we aimed to solve there.
- Jake:It's like, how can you animate the thing
- Jake:that isn't there anymore?
- Jake:The solution to that was to use
- Jake:screenshots of the old thing.
- Surma:Here's my confession.
- Surma:I have not used view transitions.
- Jake:Mate.
- Surma:I've not written any.
- Jake:Mate.
- Jake:Cut steep.
- Surma:I think I think I think you're breaking up with me.
- Jake:I think I am.
- Jake:No, I
- Jake:forgive you. I think
- Jake:my confession is now that we've got
- Jake:cross-document view
- Jake:transitions, I kept meaning to add them to
- Jake:my blog and stuff, and I just
- Jake:haven't found the time.
- Jake:Whatever.
- Jake:Okay. Back to the problem.
- Jake:We haven't solved the full problem, because we've still
- Surma:Wait, did I get the problem right?
- Jake:got that issue of it disappearing off the top layer.
- Jake:So, the solution to that
- Jake:is to set a transition on this
- Jake:new CSS property called
- Jake:overlay, and that
- Jake:is a way of kind of delaying
- Jake:it disappearing from the
- Jake:top layer. It kind of pretends
- Jake:like overlay has a value
- Jake:of top layer, but you're not allowed to set this yourself.
- Surma:The ring is like when I'm closing my custom select, it just poofs goes away.
- Surma:And we obviously want to have an opportunity to make it smoothly go away to the developers
- Jake:So,
- Jake:you need to keep
- Surma:liking.
- Jake:display around
- Jake:for longer, but you also need to keep it
- Jake:in the top layer for longer. This problem
- Jake:also exists with the dialog
- Jake:element. So, yes, it's kind of pretend
- Jake:property that lets you
- Jake:set something into the top layer, except you're not
- Jake:allowed to set it in the top layer, but
- Jake:you can put it in a transition which
- Jake:keeps this user agent set value
- Jake:top layer
- Jake:around for a bit longer.
- Jake:It's a bit hacky,
- Surma:Ah, it feels odd, but I guess it solves the problem.
- Jake:but it does work.
- Surma:But it's limited to things in the topic.
- Surma:I can't just use the same thing on elements anywhere else on the page.
- Jake:So, with this display property,
- Jake:you can use that on any element.
- Jake:Yeah, that works on anything, and it's in Chrome and
- Jake:Safari now. But this
- Jake:extra one that does the top layer
- Jake:thing, that's Chrome only
- Jake:right now. And yes, that's only really useful
- Jake:for
- Jake:this select element thing.
- Jake:It's useful for popovers, and it's useful for
- Surma:Right.
- Jake:dialog.
- Surma:OK, that makes sense.
- Jake:Final bit. I sort of
- Jake:described it as like we're doing an animation in,
- Jake:but we're having to use transition
- Jake:to make something transition out.
- Jake:And the reason for that is because
- Jake:if you want something to animate just when it appears,
- Jake:that's not a transition because it's in that
- Surma:Mm hmm.
- Jake:state already, whereas animations do let
- Jake:you do that. Something appears, do your animation.
- Jake:But they've also added a way to make this work
- Jake:for CSS transitions. And that's
- Jake:of benefit because it means that
- Jake:if the transition in is interrupted,
- Jake:it can skip
- Surma:Mm hmm.
- Jake:some of the transition out. It can start
- Jake:it halfway through or whatever to make
- Jake:a smooth transition. That's one of the
- Surma:Mm hmm.
- Jake:nice benefits of CSS transitions.
- Jake:So they added
- Jake:at starting style, which is a block
- Jake:which lets you,
- Jake:for a selector,
- Jake:say, pretend
- Jake:that it had these styles
- Surma:Mm hmm.
- Jake:before it was created.
- Jake:And so if that has
- Jake:a transition applied to it,
- Surma:Yeah.
- Jake:when the thing appears, it's going to transition from those
- Jake:starting styles to its actual styles.
- Surma:I feel like I love the problem.
- Jake:...
- Jake:...
- Surma:I love that they made a solution. I'm not sure I love this specific solution syntactically.
- Jake:...
- Jake:...
- Surma:But, you know what? In the end, like, I don't have a better solution at hand.
- Jake:...
- Jake:...
- Surma:So, and again, I can use this on any element, right? Like, I can define a
- Jake:...
- Jake:...
- Surma:transition now that plays when I add an element to the tree.
- Jake:...
- Jake:...
- Surma:Not just an animation. That's really cool.
- Jake:Yeah, I agree that
- Jake:so much new syntax is being chucked
- Jake:at CSS. It's kind of growing
- Jake:faster syntactically than
- Jake:JavaScript, it feels like.
- Surma:Mm hmm.
- Jake:Yeah, and it's difficult to keep up with.
- Jake:But yeah, it's a solution to the problem.
- Jake:And yeah, you can use it everywhere, but it is
- Jake:useful for select.
- Jake:So that's it, really.
- Jake:We're almost in a position to create these
- Jake:custom select things. People should play with it
- Jake:and give feedback.
- Surma:Yeah, I'm genuinely quite excited to look at some, I'm sure you will have
- Jake:...
- Jake:...
- Surma:some demos to link to that I can look at in Chrome Canary or something.
- Jake:...
- Jake:Yes, I'll link to all of that.
- Surma:Because I want to dig into that code and get a bit familiar with all
- Jake:...
- Jake:...
- Surma:the individual primitives. Because what I do think is really, really nice that they didn't
- Jake:...
- Jake:...
- Surma:just, here is a stylable select. But they were like, what is
- Jake:...
- Jake:...
- Surma:missing across the platform that we can then compose to
- Jake:...
- Jake:...
- Surma:yield a stylable select element. And yeah, that deserves applause.
- Jake:...
- Jake:...
- Surma:That's really cool that they went about it this way.
- Jake:Exactly, yeah. It's ten general features,
- Jake:right? We've got popovers, buttons that
- Jake:can activate
- Jake:popovers, and they're also
- Jake:working on general activation,
- Jake:like general declarative,
- Jake:you know, click this button, it makes this other thing do a thing,
- Surma:Thank you.
- Jake:whatever. CSS anchor
- Jake:positioning, the open and close pseudo-elements,
- Jake:transitioning, animating
- Jake:to keyword sizes, like height-auto,
- Jake:calculations involving
- Jake:those keyword sizes,
- Jake:transitioning to discrete values,
- Jake:like display-none,
- Jake:that kind of thing, animating
- Jake:display with auto-inert, animating the
- Jake:overlay for the top-layer thing,
- Jake:and the starting style. That's ten features
- Jake:that are kind of all part of
- Jake:making custom selects work,
- Jake:but you can use them elsewhere.
- Surma:It's a pretty big flex for standards land.
- Jake:...
- Jake:... Yeah.
- Jake:It feels like the right way, right?
- Jake:Rather than just, as you said,
- Jake:creating a general select thing that has
- Jake:all of this magic in it, it's like, no.
- Jake:Most of the magic can be explained by
- Jake:other features.
- Surma:Yeah, no, that's brilliant. That's really good.
- Jake:...
- Jake:That's all I've got. That's it.
- Jake:That's it. That's the content.
- Surma:I mean, you say like that wasn't a lot. I feel like you have explained ten features.
- Jake:...
- Jake:...
- Surma:So I'm gonna, I'm gonna have to sit down and digest.
- Jake:...
- Jake:Well, there you go. Oh, thanks, mate.
- Jake:Yeah. Shall we all have a
- Jake:lie down?
- Surma:Yeah, let's let's have a lie down.
- Jake:All right, then.
- Jake:Okay. Well, there's nothing
- Jake:else to say other than
- Jake:happy next time. Bye!
- Surma:Happy next time.
- Jake:...
- Jake:...
- Jake:...
- Jake:...
- Jake:...
- Jake:...
