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.
|
if (!/^--/.test(state) || typeof state !== 'string') { |
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`); |
|
} |
https://codepen.io/dannymoerkerke/pen/KKEyarg
^ Example supporting both syntaxes.
With the deprecation of the
:--statesyntax, 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.
element-internals-polyfill/src/CustomStateSet.ts
Lines 30 to 32 in f303390
https://codepen.io/dannymoerkerke/pen/KKEyarg
^ Example supporting both syntaxes.