Dialogs cannot be shown with the Popover API

Open Beginner friendly
#34 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
css
Domain
frontend

Research direction

Start by reproducing the dialog/popover behavior in the linked CodePen, then locate the shown dialog:not([open]) rule in the stylesheet. Update the normalization so a <dialog popover> can be displayed, and verify that both ordinary dialogs and popover dialogs remain correctly visible or hidden.

Written by the indexing model from the issue text.

Description

The following rule prevents <dialog> elements from being shown with the Popover API:

:where(dialog:not([open])) {
  display: none;
}

This codepen demonstrates the issue: https://codepen.io/pokeplun/pen/GgjdgQx

The methods of showing the <dialog> that treat it as a popover don't result in a state that matches dialog[open] (they only match :popover-open), which results in the element never being shown by default.

<dialog popover> is perfectly reasonable semantically, so this seems like a bug

Dominant language
HTML
Stars
656
Forks
66
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from csstools/normalize.css

All issues in csstools/normalize.css

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.