[thousand_nights]

> comnpletely unstyled,

this is what completely holds back most built-in browser components from widespread usage, i suspect the vendors implementing it just don't care at all because it's not their problem

every company i've ever worked at had at least a somewhat consistently defined design language and it would look completely amateurish and out of place to use built in browser components in most places, regardless of how much html/css purists want that to be the case

unless that is fixed, it will never happen

[MrJohz]

I think you might be talking about a different thing to the other poster.

The dialog element behaves exactly how you'd want it to behave for a company with their own design language — you can style every part of it exactly how you need it (including the backdrop, the positioning and size of the dialog element itself, borders, colours, contents, etc). Depending on how you implement the design language, you can either apply those styles to the dialog element in general, or provide a custom component that wraps the dialog element and provides the styles you need.

What the previous poster was complaining about was the opposite situation: they aren't working with their own design language, and instead want to use native-looking HTML elements (the default inputs, selects, buttons, etc). However, the dialog element does not provide a native look-and-feel, and instead is very minimalistic, providing only the base that developers can add their own styles to.

That said, I think the browser implementors have made the correct choice here. The dialog element is not a native popup, and doesn't behave like a native popup at all, so it doesn't make sense to style it natively. In addition, the more styles they provide as part of the user-agent styling, the harder it is to reset those styles if you want to do something different. Apart from inputs, browsers fairly consistently stick with providing the minimum possible styling for an element to be usable, and this means that developers have the largest range of freedom to use those elements as they like.

[ryandrake]

I feel like every company's (different/contrasting) "design language" and their insistence on using it, ends up being yet another weird looking thing on my computer. I'd rather decide for myself the fonts, color scheme, look and feel, etc. for applications on my computer, and have applications be consistent and respect those preferences. Rather than have some artist I don't know 2,000 miles away from me simply decide what a dialog should look like (and it's always totally different than what some other artist decided a dialog should look like).

[xp84]

I think most of us here who aren't self-important "UX designers" (or branding consultants) would agree with you, but the decision makers responsible for most of the sites on the Web disagree/don't care what we'd like. They want their site to look identical on all platforms and browsers, and to have their "signature" design language, to heck with what users might expect. It's why you see stupid things like pixel-perfect clones of the iOS "switch" control brought to the Web.

So, anyway, if the `<dialog>` is ever to have a chance at adoption, instead of the "div soup and 1000 lines of JS and CSS modal" we've had everywhere since 2008 or so, it really should be blank slate for the "UX Designer" who fancies themself a real artist can vomit their personal brand of "elegant but bold, minimalist, flat design" onto the DOM.

If it's not completely skinnable, they'll just keep insisting on building div soup modals forever.

[mardifoufs]

Idk, personally I completely disagree. I don't want to theme every single app. I want them to be distinctive and I don't actually care about native look. What I care about is that they have a nice design (which is as subjective as it gets, I know) but more importantly that they are distinctive enough in terms of design. Now I don't want every app to have different shortcuts or whatever, but I don't want slack to look like discord for example. And I don't want to theme anything ideally.

[DaiPlusPlus]

"But we don't want to look like everyone else"

[spatley]

and/or making the website using the most modern design trends sets us apart and reinforces that we are a cutting edge company.

[DaiPlusPlus]

Right down to the Stablediffusion-generated corporate-memphis artwork

[IgorPartola]

These are the same people who insist on having PDF copies of everything and sometimes PDF forms. Nobody ever designs custom PDF form styling to be different. I wonder why? /s

[chrishtr]

The <dialog> element is fully styleable, including its backdrop (the MDN article explains how for the latter). In Chrome you can also fully style animations opening and closing a <dialog> or popover.

https://developer.chrome.com/blog/entry-exit-animations

[salzig]

@starting-style support is quite good in all browsers, not just chrome. https://caniuse.com/?search=%20%40starting-style

[dylan604]

the most commonly used element that I use is the date picker. i hate using it, but i'm not loading some library or framework just for it either.

[8n4vidtmkvmk]

The native datepicker is weird, at least in Chrome. I was playing around with it, and if you give it milliseconds it will render a millisecond picker in intervals of 100. If you give it a nice round minute, then ms and s disappear from the UI. There's no attribute to control this.

I also want a non-local time picker. Let me specify a time that the server can properly interpret as a moment in time. i.e specify an offset somehow.

[thousand_nights]

i don't know what context you're using it in, but imagine a company like airbnb or booking.com using the built in date picker on their front page

you might as well cut their public valuation in half at that point. it's just not worth it to use the completely neglected and anemic components that are part of the browser, they are a joke

[WD-42]

Weird. I think the built in date picker is actually pretty nice.

[dylan604]

functionally it is perfectly fine. aesthetically, it looks nothing like any other component of the site's style. it very much looks like a band-aid

[dotancohen]

In which browser and OS?