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

CustomStateSet for custom elements #688

Closed
calebdwilliams opened this issue Sep 8, 2022 · 7 comments
Closed

CustomStateSet for custom elements #688

calebdwilliams opened this issue Sep 8, 2022 · 7 comments

Comments

@calebdwilliams
Copy link

Request for Mozilla Position on an Emerging Web Specification

Other information

This provides an API to allow custom element authors a way to expose internal state to the DOM for matching operations (including CSS and things like document.querySelector).

This is done via the ElementInternals.prototype.states, which is a set of custom states. A naive example would be

class FancyElement extends HTMLElement {
  constructor() {
    super();
    const internals = this.attachInternals();

    this.internals.states.add('--fancy');
  }
}

customElements.define('fancy-element', FancyElement);

This would mean that a newly-constructed instance of fancy-element would match against :--fancy.

@bgrins
Copy link
Member

bgrins commented Sep 8, 2022

Is the explainer out of date? the code sample there doesn't use the -- prefixed syntax, for example

@calebdwilliams
Copy link
Author

It very well could be. Chrome shipped this with feature requiring the double-dash prefix presumably to avoid collisions with future DOM state matches that might need to be built in.

@keithamus
Copy link

keithamus commented Nov 12, 2023

I can't comment on if Mozilla supports the proposal or not, but there is an intent to prototype (https://groups.google.com/u/1/a/mozilla.org/g/dev-platform/c/vDVxI6O3YqU) and there is an experimental implementation behind a flag in Nightly.

Is the explainer out of date? the code sample there doesn't use the -- prefixed syntax, for example

The explainer is up to date. The selector takes the shape of :state(fancy) rather than :--fancy. It was resolved to change this in a CSSWG meeting.

@zcorpan
Copy link
Member

zcorpan commented Nov 13, 2023

cc @emilio @EdgarChen

@emilio
Copy link
Collaborator

emilio commented Nov 13, 2023

This looks sensible to me. Positive?

@zcorpan
Copy link
Member

zcorpan commented Nov 13, 2023

Do we need a dashboard entry here?

@emilio
Copy link
Collaborator

emilio commented Nov 14, 2023

I could go either way. It's not a particularly big feature imo.

@zcorpan zcorpan closed this as completed Nov 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants