CustomStateSet plus using custom elements #30566

hamishwillee · 2023-11-27T06:56:05Z

This updates CustomStateSet and Using custom components to reflect the addition of support for exposing states from a custom web component so that they can be used as a selector for CSS.

Note, it also moves CustomStateSet and ElementInternals into the Web Components sidebar rather than DOM sidebar - of course all of these are also DOM, but they can only be used in custom components.

Things to do.

CustomStateSet
- needs to show how to attachInternals - you can't use this otherwise.
- Text incorrectly refers to it as CustomStateList
- Structure needs to follow current templates
- Example is cut down version of the spec checked state checkbox thingy. Better to either show whole thing or a different example.
- Omits how you handle multiple non-boolean states. Perhaps a loading, non, loading state like spec but worked.
- I think these can only be done with automatic components, not built ins. Confirming.
Using custom components - cross link and at least outline what you can do.

Related docs work in #30339

github-actions · 2023-11-27T06:58:04Z

Preview URLs (66 pages)

External URLs (2)

URL: /en-US/docs/Web/API/HTMLElement/attachInternals
Title: HTMLElement: attachInternals() method

https://wicg.github.io/aom/explainer.html (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/API/CustomStateSet
Title: CustomStateSet

ElementInternals should work with customized built-in elements whatwg/html#5166 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-12-08 01:31:29)

files/en-us/web/api/customstateset/index.md

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

hamishwillee · 2023-12-08T01:29:33Z

Thanks for the review @bsmth - very helpful. I've merged the changes with very minor modifications. Yes, this example doesn't work properly on FF. I'm OK with that while it is behind a preference. It matches the spec, and works on chrome.

bsmth · 2023-12-08T11:06:50Z

very helpful. I've merged the changes with very minor modifications.

Super, thanks!

This example doesn't work properly on FF. I'm OK with that while it is behind a preference. It matches the spec, and works on chrome.

Agreed, looking good!

bsmth

Thanks Hamish, merging shortly 🚢

* CustomStateSet plus using custom elements * ElementInternals is WebComponent specialization of DOM * CustomStateSet is WebComponent specialization of DOM * Add ElementInternals and CustomStateSet to the WebComponents API * CustomStateSet - correct and uses the checkbox * Cross link to Using custom elements * Make my custom element a block element * Fix up to use annoying heading separaters meh * Apply suggestions from code review Co-authored-by: Brian Thomas Smith <brian@smith.berlin> * Apply suggestions from code review --------- Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

github-actions bot added the Content:WebAPI Web API docs label Nov 27, 2023

hamishwillee mentioned this pull request Nov 28, 2023

[BehindPref][WebAPI] Implement CustomStateSet #30339

Closed

10 tasks

hamishwillee marked this pull request as ready for review November 28, 2023 06:28

hamishwillee requested review from a team as code owners November 28, 2023 06:28

hamishwillee requested review from wbamberg and bsmth and removed request for a team November 28, 2023 06:28