diff --git a/README.md b/README.md index da00c24..cbbff82 100644 --- a/README.md +++ b/README.md @@ -47,87 +47,87 @@ Users can turn on/off the switch by clicking it, and submitting the form will ha ## Proposed API The element is provided as a [built-in module](https://github.com/tc39/proposal-javascript-standard-library/). -```import 'std:elements/switch'``` defines `````` element and ```StdSwitchElement``` interface. +`import 'std:elements/switch'` defines `` element and `StdSwitchElement` interface. -`````` is similar to `````` in terms of API. A `````` instance has two states; "off" and "on". It doesn't support indeterminate state like the checkbox. +`` is similar to `` in terms of API. A `` instance has two states; "off" and "on". It doesn't support indeterminate state like the checkbox. ### Content attributes: * [Global attributes](https://html.spec.whatwg.org/multipage/dom.html#global-attributes) -* ```autocomplete``` -* ```disabled``` -* ```form``` -* ```name``` -* ```required``` +* `autocomplete` +* `disabled` +* `form` +* `name` +* `required` -TODO: Supports ```autofocus```, which should be a global attribute. ([whatwg/html#4563](https://github.com/whatwg/html/issues/4563)) +TODO: Supports `autofocus`, which should be a global attribute. ([whatwg/html#4563](https://github.com/whatwg/html/issues/4563)) These attributes should work same as existing form controls. -`````` should support ```checked``` and ```defaultchecked``` attributes ([Issue #2](https://github.com/tkent-google/std-switch/issues/2)). There are some approaches for them. We have not decided yet. ([Issue #4](https://github.com/tkent-google/std-switch/issues/4)) +`` should support `checked` and `defaultchecked` attributes ([Issue #2](https://github.com/tkent-google/std-switch/issues/2)). There are some approaches for them. We have not decided yet. ([Issue #4](https://github.com/tkent-google/std-switch/issues/4)) -* A) Compatible with ``````
-```checked``` attribute represents the default state, and ```defaultChecked``` property reflects on ```checked``` attribute. No attribute mapped to ```checked``` property. +* A) Compatible with ``
+`checked` attribute represents the default state, and `defaultChecked` property reflects on `checked` attribute. No attribute mapped to `checked` property. * B) Simple mappings
-```defaultChecked``` property reflects on ```defaultchecked``` attribute value, and ```checked``` property reflects on ```checked``` attribute. Code like ```switch.checked = true``` adds ```checked``` attribute. We need to specify ```defaultchecked``` attribute if we want to reset the element to on state, like `````` +`defaultChecked` property reflects on `defaultchecked` attribute value, and `checked` property reflects on `checked` attribute. Code like `switch.checked = true` adds `checked` attribute. We need to specify `defaultchecked` attribute if we want to reset the element to on state, like `` ### Properties and functions -* ```checked``` - Represents the element's state. See the previous section -* ```defaultChecked``` - Represents the default state. See the previous section -* ```disabled``` - Same as existing form controls -* ```form``` - Same as existing form controls -* ```labels``` - Same as existing form controls -* ```name``` - Same as existing form controls -* ```type``` - returns ```'std-switch'``` -* ```willValidate``` - Same as existing form controls -* ```validationMessage``` - Same as existing form controls +* `checked` - Represents the element's state. See the previous section +* `defaultChecked` - Represents the default state. See the previous section +* `disabled` - Same as existing form controls +* `form` - Same as existing form controls +* `labels` - Same as existing form controls +* `name` - Same as existing form controls +* `type` - returns `'std-switch'` +* `willValidate` - Same as existing form controls +* `validationMessage` - Same as existing form controls -* ```checkValidity()``` - Same as existing form controls -* ```reportValidity()``` - Same as existing form controls -* ```setCustomValidity(errorMessage)``` - Same as existing form controls +* `checkValidity()` - Same as existing form controls +* `reportValidity()` - Same as existing form controls +* `setCustomValidity(errorMessage)` - Same as existing form controls ### Pseudo classes -* Global ones such as ```:focus``` ```:hover``` ```:target``` -* ```:valid``` - match if the element has no ```required``` attribute, of if the element has ```required``` attribute and the state is on. -* ```:invalid``` - match if the element doesn't match to ```:valid```. -* ```:disabled``` - match if the element has ```disabled``` attribute, or an ancestor ```
``` has ```disabled``` attribute. -* ```:enabled``` - match if the element doesn't match to ```:disabled```. +* Global ones such as `:focus` `:hover` `:target` +* `:valid` - match if the element has no `required` attribute, of if the element has `required` attribute and the state is on. +* `:invalid` - match if the element doesn't match to `:valid`. +* `:disabled` - match if the element has `disabled` attribute, or an ancestor `
` has `disabled` attribute. +* `:enabled` - match if the element doesn't match to `:disabled`. -TODO: Supports ```:checked``` ([Issue #3](https://github.com/tkent-google/std-switch/issues/3)), ```:required```, and ```:optional``` ([w3c/webcomponents#813](https://github.com/w3c/webcomponents/issues/813)) +TODO: Supports `:checked` ([Issue #3](https://github.com/tkent-google/std-switch/issues/3)), `:required`, and `:optional` ([w3c/webcomponents#813](https://github.com/w3c/webcomponents/issues/813)) ### Events -`````` dispatches ```input``` and ```change``` events when a user changes the element's state. +`` dispatches `input` and `change` events when a user changes the element's state. ### Relationship with other elements -* ```form```
- Markup like ```
......
``` associates the `````` element to the ```
```. ``````'s ```elements``` property lists the ``````, and submitting the `````` adds an entry for the ``````. -* ```fieldset```
- Markup like ```
......
``` associates the `````` element to the ```
```. ```
```'s ```elements``` property lists the ``````, and disabling the ```
``` also disables the `````` implicitly. -* ```label```
- Markup like `````` associates the `````` element to the ```