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.

Sign up for GitHub

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

Explain label activation behavior + custom elements #5021

Merged
merged 2 commits into from
Dec 4, 2019
Merged

Explain label activation behavior + custom elements #5021

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07afc3d
Explain label activation behavior + custom elements
domenic Oct 18, 2019
b2999be
Remove "parallel"
domenic Dec 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43707,22 +43707,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 parallel code</p>
domenic marked this conversation as resolved.
Show resolved Hide resolved

<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