Re: [w3c/webcomponents] Add custom states and :state() pseudo class proposal (#832)

tkent-google commented on this pull request.



> +}
+customElements.define('labeled-checkbox', LabeledCheckbox);
+customElements.define('question-box', QuestionBox);
+</script>
+
+<style>
+  question-box::part(checkbox){ color: red;}
+  question-box::part(checkbox):state(checked) { color: green; }
+</style>
+  
+<question-box>Continue?</question-box>
+</body>
+```
+## Proposal 
+
+Add a `states` property to the [ElementInternals](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) interface to contain a list of states for the corresponding custom element, and a new `:state(x)` pseudo-class that can select custom elements that contains `x` in its `ElementInternals`' `state`. An example implementation of a custom element that uses this is shown above.

The code example indicates `states` has `add()` and `remove()`.  What other operations does it have?  Is it a `DOMTokenList`?


> @@ -0,0 +1,105 @@
+# `ElementInternals.states` and the `:state()` pseudo class
+
+Author: @rakina, @domenic
+
+## Introduction
+
+Built-in elements have certain “states” that can change over time depending on user interaction and other factors, and are exposed to web authors through pseudo classes. For example, some form controls have the “invalid” state, which is exposed through the `:invalid` pseudo class.
+
+Like built-in elements, custom elements can have various states to be in too, and web authors might want to expose these states in a similar fashion as the built-in elements. With the proposed `ElementInternals.state`  property, custom element authors can add and modify custom states for the custom elements, and allow them to be selected with the `:state()` selector.

ElementInternals.state -> ElementInternals.states ?


> +}
+customElements.define('labeled-checkbox', LabeledCheckbox);
+customElements.define('question-box', QuestionBox);
+</script>
+
+<style>
+  question-box::part(checkbox){ color: red;}
+  question-box::part(checkbox):state(checked) { color: green; }
+</style>
+  
+<question-box>Continue?</question-box>
+</body>
+```
+## Proposal 
+
+Add a `states` property to the [ElementInternals](https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals) interface to contain a list of states for the corresponding custom element, and a new `:state(x)` pseudo-class that can select custom elements that contains `x` in its `ElementInternals`' `state`. An example implementation of a custom element that uses this is shown above.

ElementInternals' state -> ElementInternals' states ?


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/pull/832#pullrequestreview-282440619