[popup] Boolean property for show state

[0kku]

Is there a reason why there's no mention (that I can find) of a writable property for the "shown" state of a popup?

For example, it could look something like this:

popup.popUpShown // false
popup.showPopUp();
popup.popUpShown // true
popup.popUpShown = false;
popup.popUpShown // false

Or alternatively, it could be called popUpOpen.

I realize that one can check if a popup is being shown using popUp.matches(":open") as described in the explainer. However, this does not allow assigning a boolean value for the state. This would be helpful in a framework setting:

function MyComponent () {
  const shown = state(false);
  
  return html`
    <div popUp="auto" popUpShown=${shown} />
  `;
}

While, from what I understand, the current API would require one to write cumbersome code like this:

function MyComponent () {
  const shown = state(false);
  const popup = ref();
  
  if (shown && !popUp.matches(":open")) popup.showPopUp();
  else if (!shown && popUp.matches(":open")) popup.hidePopUp();
  
  return html`
    <div popUp="auto" ref=${popup} />
  `;
}

This would be less cumbersome if there was a toggle method that takes an argument for forcing the state similar to APIs like element.toggleAttribute(), classList.toggle(), etc. (which also doesn't seem to be present), though it would still be less ergonomic than having the proposed property:

function MyComponent () {
  const shown = state(false);
  const popup = ref();
  
  popup.togglePopUp(shown);
  
  return html`
    <div popUp="auto" ref=${popup} />
  `;
}