search

calebdwilliams / element-internals-polyfill

A polyfill for the element internals specification
MIT License
97 stars 30 forks source link

Support for the new `:state()` syntax #126

Open KonnorRogers opened 6 months ago

KonnorRogers commented 6 months ago

With the deprecation of the :--state syntax, I imagine the restrictions around requiring the -- prefix should be removed.

https://groups.google.com/a/chromium.org/g/blink-dev/c/GDmNaxAuCY4/m/WOQD5uRTAQAJ

https://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states

It has not been implemented in Chrome yet, but it has been implemented in Safari TP and I believe is being worked on for Firefox.

https://github.com/calebdwilliams/element-internals-polyfill/blob/f3033904ab7a853142177791c16430e1c0382195/src/CustomStateSet.ts#L30-L32

https://codepen.io/dannymoerkerke/pen/KKEyarg

^ Example supporting both syntaxes.

keithamus commented 6 months ago

https://github.com/keithamus/fdgt/blob/main/stateset.js here's a polyfill I use (gets added here) which uses an internal Set to keep track for unsupported browsers, and calls .add in a try/catch (the current standard doesn't validate beyond the first arg being a string so thrown errors would only be from "old" Chrome). Feel free to repurpose as you see fit for this polyfill.