Skip to content

Commit

Permalink
Explain label activation behavior + custom elements
Browse files Browse the repository at this point in the history
Closes #5009.
  • Loading branch information
domenic authored Dec 4, 2019
1 parent 8f8c1f5 commit 836294c
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -43720,22 +43720,37 @@ interface <dfn>HTMLLabelElement</dfn> : <span>HTMLElement</span> {
at <span>interactive content</span> descendants of a <code>label</code> element, and any
descendants of those <span>interactive content</span> descendants, must be to do nothing.</p>

<p class="note"><span data-x="form-associated custom element">Form-associated custom
elements</span> are <span data-x="category-label">labelable elements</span>, so for user agents
where the <code>label</code> element's <span>activation behavior</span> impacts the <span>labeled
control</span>, both built-in and custom elements will be impacted.</p>

<!-- activation behavior need not be dependent on whether the
labeled control is being rendered:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=371
-->

<div class="example">

<p>For example, on platforms where clicking a checkbox label checks the checkbox, clicking the
<p>For example, on platforms where clicking a label activates the form control, clicking the
<code>label</code> in the following snippet could trigger the user agent to <span>fire a <code
data-x="event-click">click</code> event</span> at the <code>input</code> element, as if the
element itself had been triggered by the user:</p>

<pre><code class="html" data-x="">&lt;label>&lt;input type=checkbox name=lost> Lost&lt;/label></code></pre>

<p>On other platforms, the behavior might be just to focus the control, or do nothing.</p>
<p>Similarly, assuming <code data-x="">my-checkbox</code> was declared as as a
<span>form-associated custom element</span> (like in <a href="#custom-elements-face-example">this
example</a>), then the code</p>

<pre><code class="html" data-x="">&lt;label>&lt;my-checkbox name=lost>&lt;/my-checkbox> Lost&lt;/label></code></pre>

<p>would have the same behavior, <span data-x="fire a click event">firing a <code
data-x="event-click">click</code> event</span> at the <code data-x="">my-checkbox</code>
element.</p>

<p>On other platforms, the behavior in both cases might be just to focus the control, or to do
nothing.</p>
</div>

</div>
Expand Down

0 comments on commit 836294c

Please sign in to comment.