From f590a1e5569c4ce45560b1e0631d935eca79fb5f Mon Sep 17 00:00:00 2001 From: Kent Tamura Date: Tue, 12 May 2020 11:15:32 +0900 Subject: [PATCH] Change the syntax; :state(foo) -> :--foo Fixes https://github.com/WICG/custom-state-pseudo-class/issues/6 --- index.bs | 51 ++++++++++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/index.bs b/index.bs index e4b471b..8507dd2 100644 --- a/index.bs +++ b/index.bs @@ -10,9 +10,9 @@ Editor: Rakina Zata Amni, Google https://www.google.com/, rakina@google.com Editor: Domenic Denicola, Google https://www.google.com/, d@domenic.me, https://domenic.me/ Repository: https://github.com/WICG/custom-state-pseudo-class/ Abstract: This specification defines a way to expose custom element's internal - states, and defines the '':state()'' [=pseudo-class=] matching to a custom - element exposing a state. This specification is intended to be merged to - [[DOM]], [[HTML]], and [[selectors-4]] in the future. + states, and defines the custom state pseudo class '':--foo'' matching + to a custom element exposing a state. This specification is intended to be + merged to [[DOM]], [[HTML]], and [[selectors-4]] in the future. Markup Shorthands: markdown yes Default Biblio Status: current Complain About: accidental-2119 yes, missing-example-ids yes @@ -37,7 +37,7 @@ as the built-in elements. This specification defines an API to inform [=custom element=]'s states to the user agent, and a [=pseudo-class=] to select elements with specific states. The former is the {{ElementInternals/states}} IDL attribute of -{{ElementInternals}}, and the latter is the '':state()'' [=pseudo-class=]. +{{ElementInternals}}, and the latter is the custom state pseudo class.
@@ -65,15 +65,15 @@ class LabeledCheckbox extends HTMLElement { white-space: pre; font-family: monospace; } - :host(:state(checked))::before { content: '[x]' } + :host(:--checked)::before { content: '[x]' } </style> <slot>Label</slot>`; } - get checked() { return this._internals.states.contains('checked'); } + get checked() { return this._internals.states.contains('--checked'); } set checked(flag) { - this._internals.states.toggle('checked', !!flag); + this._internals.states.toggle('--checked', !!flag); } _onClick(event) { @@ -86,7 +86,7 @@ customElements.define('labeled-checkbox', LabeledCheckbox); <style> labeled-checkbox { border: dashed red; } -labeled-checkbox:state(checked) { border: solid; } +labeled-checkbox:--checked { border: solid; } </style> <labeled-checkbox>You need to check this</labeled-checkbox> @@ -107,7 +107,7 @@ customElements.define('question-box', QuestionBox); <style> question-box::part(checkbox) { color: red; } -question-box::part(checkbox):state(checked) { color: green; } +question-box::part(checkbox):--checked { color: green; } </style> <question-box>Continue?</question-box> @@ -141,17 +141,17 @@ existence/non-existence of string tokens. If an author wants to expose a state which can have three values, it can be converted to three exclusive boolean states. For example, a state called readyState with "loading", "interactive", and "complete" -values can be mapped to three exclusive boolean states, "loading", -"interactive", and "complete". +values can be mapped to three exclusive boolean states, "--loading", +"--interactive", and "--complete". 
 // Change the readyState from anything to "complete".
 this._readyState = "complete";
-this._internals.{{states}}.{{DOMTokenList/remove}}("loading", "interactive");
-this._internals.{{states}}.{{DOMTokenList/add}}("complete");
+this._internals.{{states}}.{{DOMTokenList/remove}}("--loading", "--interactive");
+this._internals.{{states}}.{{DOMTokenList/add}}("--complete");
 // If this has no states other than _readyState, the following also works in
 // addition to remove() and add().
-// this._internals.{{states}} = "complete";
+// this._internals.{{states}} = "--complete";
Issue(WICG/custom-state-pseudo-class#4): Support non-boolean states. @@ -262,21 +262,22 @@ if following edits were applied to the definition of {{DOMTokenList}}. Selecting a custom element with a speicfic state {#selecting} ============================ -The :state() [=pseudo-class=] applies while an element has a -certain state. "State" is a per-element information which can change over time -depending on user interaction and other extrinsic factors. -The '':state()'' [=pseudo-classs=] must have one <> argument, otherwise -the selector is invalid. +The custom state pseudo class '':--foo'' is a [=pseudo class=], +and applies while an element has a certain state. "State" is a per-element +information which can change over time depending on user interaction and other +extrinsic factors. The custom state pseudo class must start with '':'', +followed by one <>, otherwise the selector is invalid. -The '':state()'' [=pseudo-class=] must match any element that is an +The custom state pseudo class must match any element that is an autonomous custom element and whose [=states token list=] -contains the specified <>. +contains the specified <>.
-'':state()'' takes just one argument, and an element can expose multiple states. -Authors can use '':state()'' with logical [=pseudo-classes=] like -''x-foo:is(:state(state1), :state(state2))'', ''x-foo:not(:state(state2))'', -and ''x-foo:state(state1):state(state2)''. +A custom state pseudo class contains just one <>, and an +element can expose multiple states. Authors can use +custom state pseudo class with logical [=pseudo-classes=] like +''x-foo:is(:--state1, :--state2)'', ''x-foo:not(:--state2)'', and +''x-foo:--state1:--state2''.