Skip to content
Permalink
Browse files

The DOM Standard defines the class, id, and slot attributes

No longer give the appearance that the HTML Standard defines the user
agent requirements around these attributes. Instead defer to the DOM
Standard, while still defining conformance requirements as relevant
to HTML elements.

This also lists the slot "superglobal" attribute for the first time
as it was only recently added to the DOM Standard.

Fixes #895 and is also a tiny step toward integrating Shadow DOM.
  • Loading branch information...
annevk committed Mar 21, 2016
1 parent f1f2caa commit 36c9938b102fecadf6029a248f40aae83ea099d2
Showing with 65 additions and 67 deletions.
  1. +65 −67 source
132 source

<ul class="brief">
<li><code data-x="attr-accesskey">accesskey</code></li>
<li><code data-x="attr-class">class</code></li>
<li><code data-x="attr-contenteditable">contenteditable</code></li>
<li><code data-x="attr-contextmenu">contextmenu</code></li>
<li><code data-x="attr-dir">dir</code></li>
<li><code data-x="attr-draggable">draggable</code></li>
<li><code data-x="attr-dropzone">dropzone</code></li>
<li><code data-x="attr-hidden">hidden</code></li>
<li><code data-x="attr-id">id</code></li>
<li><code data-x="attr-itemid">itemid</code></li>
<li><code data-x="attr-itemprop">itemprop</code></li>
<li><code data-x="attr-itemref">itemref</code></li>

<hr>

<p>The WHATWG DOM standard defines the user agent requirements for the <dfn data-x="attr-class"
id="classes"><code>class</code></dfn>, <dfn data-x="attr-id"
id="the-id-attribute"><code>id</code></dfn>, and <dfn data-x="attr-slot"><code>slot</code></dfn>
attributes for any element in any namespace. <ref spec=DOM></p>

<p>The <code data-x="attr-class">class</code>, <code data-x="attr-id">id</code>, and <code
data-x="attr-slot">slot</code> attributes may be specified on all <span>HTML elements</span>.</p>

<p>When specified on <span>HTML elements</span>, the <code data-x="attr-class">class</code>
attribute must have a value that is a <span>set of space-separated tokens</span> representing the
various classes that the element belongs to.</p>

<div class="note">

<p>Assigning classes to an element affects class matching in selectors in CSS, the <code
data-x="dom-document-getElementsByClassName">getElementsByClassName()</code> method in the DOM,
and other such features.</p>

<p>There are no additional restrictions on the tokens authors can use in the <code
data-x="attr-class">class</code> attribute, but authors are encouraged to use values that describe
the nature of the content, rather than values that describe the desired presentation of the
content.</p>

</div>

<p>When specified on <span>HTML elements</span>, the <code data-x="attr-id">id</code> attribute
value must be unique amongst all the <span data-x="concept-id">IDs</span> in the element's
<span>tree</span> and must contain at least one character. The value must not contain any <span
data-x="space character">space characters</span>.</p>

<!-- space characters are disallowed because space-separated lists of IDs otherwise would not be
able to reach all valid IDs -->

<div class="note">

<p>The <code data-x="attr-id">id</code> attribute specifies its element's <span
data-x="concept-id">unique identifier (ID)</span>.</p>

<p>There are no other restrictions on what form an ID can take; in particular, IDs can consist of
just digits, start with a digit, start with an underscore, consist of just punctuation, etc.</p>

<p>An element's <span data-x="concept-id">unique identifier</span> can be used for a variety of
purposes, most notably as a way to link to specific parts of a document using <span
data-x="concept-url-fragment">fragments</span>, as a way to target an element when scripting, and
as a way to style a specific element from CSS.</p>

</div>

<div w-nodev>

<p>Identifiers are opaque strings. Particular meanings should not be derived from the value of the
<code data-x="attr-id">id</code> attribute.</p>

</div>

<p>There are no conformance requirements for the <code data-x="attr-slot">slot</code> attribute
specific to <span>HTML elements</span>.</p>

<hr>

<p>To enable assistive technology products to expose a more fine-grained interface than is
otherwise possible with HTML elements and attributes, a set of <a href="#wai-aria">annotations
for assistive technology products</a> can be specified (the ARIA <code
attribute on <span>HTML elements</span> in the <code>text/html</code> syntax.</p>


<h5>The <dfn><code data-x="attr-id">id</code></dfn> attribute</h5>

<p>The <code data-x="attr-id">id</code> attribute specifies its element's <span
data-x="concept-id">unique identifier (ID)</span>. <ref spec=DOM></p>

<p>The value must be unique amongst all the <span data-x="concept-id">IDs</span> in the element's
<span>tree</span> and must contain at least one character. The value must not contain any <span
data-x="space character">space characters</span>.</p>

<!-- space characters are disallowed because space-separated lists of IDs otherwise would not be
able to reach all valid IDs -->

<p class="note">There are no other restrictions on what form an ID can take; in particular, IDs
can consist of just digits, start with a digit, start with an underscore, consist of just
punctuation, etc.</p>

<p class="note">An element's <span data-x="concept-id">unique identifier</span> can be used for a
variety of purposes, most notably as a way to link to specific parts of a document using <span
data-x="concept-url-fragment">fragments</span>, as a way to target an element when scripting, and
as a way to style a specific element from CSS.</p>

<div w-nodev>

<p>Identifiers are opaque strings. Particular meanings should not be derived from the value of the
<code data-x="attr-id">id</code> attribute.</p>

</div>


<h5>The <code data-x="attr-title">title</code> attribute</h5>




<h5 id="classes">The <dfn><code data-x="attr-class">class</code></dfn> attribute</h5>

<p>Every <span data-x="HTML elements">HTML element</span> may have a <code
data-x="attr-class">class</code> attribute specified.</p>

<p>The attribute, if specified, must have a value that is a <span>set of space-separated
tokens</span> representing the various classes that the element belongs to.</p>

<div w-nodev>

<p>The classes that an <span data-x="HTML elements">HTML element</span> has assigned to it consists
of all the classes returned when the value of the <code data-x="attr-class">class</code> attribute
is <span data-x="split a string on spaces">split on spaces</span>. (Duplicates are ignored.)</p>

</div>

<p class="note">Assigning classes to an element affects class matching in selectors in CSS, the
<code data-x="dom-document-getElementsByClassName">getElementsByClassName()</code> method in the
DOM, and other such features.</p>

<p>There are no additional restrictions on the tokens authors can use in the <code
data-x="attr-class">class</code> attribute, but authors are encouraged to use values that describe
the nature of the content, rather than values that describe the desired presentation of the
content.</p>

<div w-nodev>

<hr>

<p class="note">The <dfn><code data-x="dom-className">className</code></dfn> and <dfn><code data-x="dom-classList">classList</code></dfn> IDL attributes, defined in the DOM
specification, <span>reflect</span> the <code data-x="attr-class">class</code> content attribute.
<ref spec=DOM></p>

</div>



<h5>The <dfn><code data-x="attr-style">style</code></dfn> attribute</h5>

<p>All <span>HTML elements</span> may have the <code data-x="attr-style">style</code> content
"<code data-x="attr-iframe-sandbox-allow-same-origin">allow-same-origin</code>",
"<code data-x="attr-iframe-sandbox-allow-scripts">allow-scripts</code> and
"<code data-x="attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</code>"
<tr>
<th> <code data-x="">slot</code>
<td> <span data-x="attr-id">HTML elements</span>
<td> The element's desired slot
<td> <a href="#attribute-text">Text</a>
<tr>
<th> <code data-x="">spellcheck</code>
<td> <span data-x="attr-spellcheck">HTML elements</span>

0 comments on commit 36c9938

Please sign in to comment.
You can’t perform that action at this time.