Re: [csswg-drafts] [selectors] Add :modal-dialog pseudo-class (#6965)

I can see that having a "two class" top layer, with the "developer" top layer always underneath the UA top layer, would be **easier for implementations**. It simplifies the questions around what goes on top. However, I'm worried about the [priority of constituencies](https://www.w3.org/TR/design-principles/#priority-of-constituencies). There seem to be some use cases that sounds totally rational, but would be entirely broken by this design.

In code:

```html
<dialog>
  <label>Enter your code
    <input>
    <my-tooltip>Hover over me to learn what code I'm talking about</my-tooltip>
  </label>
</dialog>
```

Here, we have a `<dialog>` asking the user for a code. There's a handy widget, `<my-tooltip>`, that provides a helpful tooltip for this input. It uses the new "developer top layer" feature to render a tooltip on top of the dialog, when hovered, to help the user. In that case, and with the "two class" top layer,

```javascript
dialog.show(); // This works great
dialog.showModal(); // This is completely broken
```

When shown non-modally, the dialog isn't in the UA top layer, and the tooltip can be shown. When shown **modally**, the tooltip doesn't work - it is underneath the dialog. If this component is third-party, the developer can't use it. If it's a 1st party component, it's not immediately obvious to me how you'd engineer around this problem. Do you walk up the DOM from your element, checking whether you're in a `<dialog>` that has the `open` attribute? What about fullscreen elements? You'd need to special case that also. When new UA top layer things are added, you'll have to update your component. Even when you can successfully detect this situation, you can no longer use the CSS top layer feature **at all**, so you need to revert back to using the "reparent to the root element" approach. At which point, don't you just abandon the CSS top layer feature entirely, since you always (for all browsers) have to engineer around using it?

It seems better to have a single top layer, where there are rules the UA uses to managing it. And a "developer" top layer feature that expects to sometimes get kicked out of the top layer when necessary. Yes, this is more work to implement, but I think it results in a more usable API for developers.

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6965#issuecomment-1028417940 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 February 2022 22:28:09 UTC