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.

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

use dashes in attribute values, #1074

Merged
merged 1 commit into from
Jul 25, 2024
Merged

Conversation

keithamus
Copy link
Collaborator

This updates the Invokers explainer to match the current conclusions based on WHATWG discussions.

See whatwg/html#10471 for minutes.

We'll hopefully discuss the heuristics for custom attributes in the next OpenUI meeting, but for now this commits the latest reality of what is being proposed.

This updates the Invokers explainer to match the current conclusions
based on WHATWG discussions.
Copy link
Collaborator

@mfreed7 mfreed7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with small comments.

Custom command values _must_ contain a `-`. They will _never_ trigger a browser
default behaviour, aside from dispatching an `CommandEvent`. This allows web
developers to create custom Invoke actions for their components.
Custom command values _must_ start with a `-`. This is a safe namespace to use,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean "contain a -"? I don't know of any other namespace in HTML that uses a single dash - for custom things. Custom elements must just contain a -.

| Invokee Element | `action` hint | Behaviour |
| :-------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------- |
| `<* popover>` | `'toggle-popover'` | Shows the `popover` if closed, otherwise hides. Similar to `.togglePopover()` |
| `<* popover>` | `'hide-popover'` | Hides the `popover` if open, otherwise does nothing. Similar to `.hidePopover()` |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh, I see where the "starts with -" came from. Perhaps the custom ones should use a starting double-dash -- to match CSS? I'd just hate to mint yet another naming scheme. I'm surprised @annevk was supportive of this naming scheme. Perhaps it exists somewhere else in HTML that I'm not thinking of?

Copy link
Collaborator Author

@keithamus keithamus Jul 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this needs some more thought. Hopefully we'll discuss in the openui call in ~10hrs 😆.

I'll merge this in its current state, with the genuine hope that I'll be following up with a more refined way to handle custom actions.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only reason CSS has two hyphens is because a single hyphen clashes with vendor prefixes. I don't think I'm opposed to mandating an additional hyphen, but there's little point to it I think.

@keithamus keithamus merged commit 156ff3f into main Jul 25, 2024
5 checks passed
@keithamus keithamus deleted the use-dashes-in-attribute-values branch July 25, 2024 08:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants