Styling issues with native <dialog> element

[LoremFooBar]

Current Behavior

There are some styling issues with native dialog elements:

1. Some theme styles are not applied on dialogs. The most obvious one is font color.
2. Using token classes for backdrops works on Firefox, but not on Chrome.

Expected Behavior

• It should be possible to style backdrops with tokens on Chrome.
• Dialogs should inherit theme styles like any other element.

Steps To Reproduce

From the repro:

<script lang="ts">
  let dialogElement: HTMLDialogElement;
  let dialogElement2: HTMLDialogElement;
</script>

<button class="btn variant-ghost-primary" on:click={()=>dialogElement.showModal()}>
  Open dialog with token backdrop
</button>
<button class="btn variant-ghost-primary" on:click={()=>dialogElement2.showModal()}>
  Open dialog with regular bg color backdrop
</button>


<dialog bind:this={dialogElement} class="backdrop:bg-surface-backdrop-token">
  Dialog content
</dialog>

<dialog bind:this={dialogElement2} class="backdrop:bg-black/50">
  Dialog content
</dialog>

Link to Reproduction / Stackblitz

https://github.com/LoremFooBar/skeleton-native-dialog-styling-issue

More Information

I added screenshots from Chrome and Firefox to the readme in the repro repo demonstrating the issues.

[endigo9740]

@LoremFooBar, so a couple things here:

1. Support for the native Dialog element is currently outside the scope of Skeleton. I'd love to include it, but it feels a bit like a half-baked implementation in most browsers and doesn't sync well with the reactive patterns of Svelte. As such, we've opted for a custom modal system.
2. You may have saw our recent post regarding progress towards Skeleton v3. We're reviewing many of the foundation features of Skeleton as part of this initiative. This includes a potential switch from :root -> :host scope when declaring CSS custom properties (aka CSS variables) used for theme settings. See that noted here for review.

I don't have a complete understanding of the native Dialog element under the hood, but if it utilizes a shadow DOM, then a move to :host in v3 will resolve some of these issues. It'll be one of many things we're testing in this regard. But we have to verify it doesn't introduce other gotchas or regressions. I would encourage you to keep an eye on progress going forward.

Given I don't think there's anything actionable for us in this ticket, I will close this out. However, I will go ahead and reference this in our v3 modal updates. I cannot promise we'll move forward with the native Dialog, but it honestly can't hurt to give it another look to confirm our stance.

Hope that helps!

[LoremFooBar]

Thanks for the detailed reply!

The reason I tried to use a native <dialog> in the first place was because I tried to do something that I couldn't do with Skeleton's Modal. But after fighting with the <dialog> element for too long, it eventually dawned on me that I actually didn't need a modal at all...