Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add IDL for all content attributes #615

Merged
merged 1 commit into from
Oct 5, 2022
Merged

Add IDL for all content attributes #615

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions research/src/pages/popup/popup.research.explainer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,15 @@ When the `popuptoggletarget`, `popupshowtarget`, or `popuphidetarget` attributes

These attributes are only supported on buttons (including `<button>`, `<input type=button>`, etc.) as long as the button would not otherwise submit a form. For example, this is not supported: `<form><input type=submit popuptoggletarget=foo></form>`. In that case, the form would be submitted, and the pop-up would **not** be toggled.

The declarative trigger attributes can also be accessed via IDL:

```javascript
// These set the IDREF for the target element, and not the element itself:
myButton.popUpToggleTarget = idref;
myButton.popUpShowTarget = idref;
myButton.popUpHideTarget = idref;
```

### Javascript Trigger

To show and hide the pop-up via Javascript, there are two methods on HTMLElement:
Expand Down Expand Up @@ -209,6 +218,12 @@ Note also that more than one `manual` pop-up can use `defaultopen` and all such
<div popup=manual defaultopen>Also shown on page load</div>
```

The `defaultopen` content attribute can also be accessed via IDL:

```javascript
myDiv.defaultOpen = true;
```

### CSS Pseudo Class

When a pop-up is open, it will match the `:open` pseudo class:
Expand Down Expand Up @@ -427,6 +442,13 @@ A new attribute, `anchor`, can be used on a pop-up element to refer to the pop-u
2. The referenced anchor element could be used by the **Anchor Positioning feature** ([(dated) explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md); [more up-to-date draft spec](https://tabatkins.github.io/specs/css-anchor-position/)).


The anchor attribute can also be accessed via IDL:

```javascript
// This sets the IDREF for the anchor element, and not the element itself:
myPopUp.anchor = idref;
```

## Backdrop

Akin to modal `<dialog>` and fullscreen elements, pop-ups allow access to a `::backdrop` pseudo element, which is a full-screen element placed directly behind the pop-up in the top layer. This allows the developer to do things like blur out the background when a pop-up is showing:
Expand Down