chromium/third_party/blink/web_tests/http/tests/inspector-protocol/resources/css-custom-state-deprecated-syntax.html

<!DOCTYPE html>

<style>
my-element:--foo {
  color: red;
}
</style>

<my-element>
  <div>hello world</div>
</my-element>

<script>
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.internals = this.attachInternals();
    this.internals.states.add('--foo');
  }
};
customElements.define('my-element', MyElement);
</script>