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

Jump to bottom

Allow more characters in custom element names #7991

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow more characters in custom element names #7991

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60a89f0
Allow more characters in custom element names
domenic Jun 7, 2022
2eb1e2d
0-based strings
domenic Jun 7, 2022
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
94 changes: 42 additions & 52 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3155,6 +3155,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<dfn data-x="concept-element-is-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-is-value"><code data-x="">is</code> value</dfn></li>

<li><dfn data-x-href="https://dom.spec.whatwg.org/#mutationobserver"><code>MutationObserver</code></dfn> interface and <dfn data-x-href="https://dom.spec.whatwg.org/#mutation-observers">mutation observers</dfn> in general</li>
<li><dfn data-x-href="https://dom.spec.whatwg.org/#valid-element-local-name">valid element local name</dfn></li>
</ul>

<p>The following features are defined in <cite>UI Events</cite>: <ref spec=UIEVENTS></p>
Expand Down Expand Up @@ -69985,43 +69986,52 @@ document.body.append(parent);

<hr>

<p>A <dfn export>valid custom element name</dfn> is a sequence of characters <var>name</var> that
meets all of the following requirements:</p>
<p>A string <var>name</var> is a <dfn export>valid custom element name</dfn> if all of the
following conditions are true:</p>

<ul>
<li>
<p><var>name</var> must match the <code
data-x="prod-PotentialCustomElementName">PotentialCustomElementName</code> production:</p>
<p><var>name</var> is a <span>valid element local name</span>;</p>

<dl>
<dt><code data-x=""><dfn
data-x="prod-PotentialCustomElementName">PotentialCustomElementName</dfn> ::=</code></dt>
<dd><code data-x="">[a-z] (<span data-x="prod-PCENChar">PCENChar</span>)* '-'
(<span data-x="prod-PCENChar">PCENChar</span>)*</code></dd>

<dt><code data-x=""><dfn data-x="prod-PCENChar">PCENChar</dfn> ::=</code></dt>
<dd><code data-x="">"-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] |
[#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] |
[#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
[#x10000-#xEFFFF]</code></dd>
</dl>
<p class="note">This ensures the custom element can be created with <code
data-x="dom-Document-createElement">createElement()</code>.</p>
</li>

<li>
<p><var>name</var>'s 0th <span>code point</span> is an <span>ASCII lower alpha</span>;</p>

<p class="note">This ensures the HTML parser will treat the name as a tag name instead of as
text.</p>
</li>

<p>This uses the <a href="https://www.w3.org/TR/xml/#sec-notation">EBNF notation</a> from the
<cite>XML</cite> specification. <ref spec=XML></p>
<li>
<p><var>name</var> does not contain any <span data-x="ASCII upper alpha">ASCII upper
alphas</span>;</p>

<p class="note">This ensures the user agent can always treat HTML elements
ASCII-case-insensitively.</p>
</li>

<li>
<p><var>name</var> must not be any of the following:</p>
<p><var>name</var> contains a U+002D (-); and</p>

<p class="note">This used for namespacing and to ensure forward compatibility (since no
elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the
future).</p>
</li>

<li>
<p><var>name</var> is not one of the following:</p>

<ul class="brief">
<li><code data-x="">annotation-xml</code></li>
<li><code data-x="">color-profile</code></li>
<li><code data-x="">font-face</code></li>
<li><code data-x="">font-face-src</code></li>
<li><code data-x="">font-face-uri</code></li>
<li><code data-x="">font-face-format</code></li>
<li><code data-x="">font-face-name</code></li>
<li><code data-x="">missing-glyph</code></li>
<li>"<code data-x="">annotation-xml</code>"</li>
<li>"<code data-x="">color-profile</code>"</li>
<li>"<code data-x="">font-face</code>"</li>
<li>"<code data-x="">font-face-src</code>"</li>
<li>"<code data-x="">font-face-uri</code>"</li>
<li>"<code data-x="">font-face-format</code>"</li>
<li>"<code data-x="">font-face-name</code>"</li>
<li>"<code data-x="">missing-glyph</code>"</li>
</ul>

<p class="note">The list of names above is the summary of all hyphen-containing element names
Expand All @@ -70030,34 +70040,14 @@ document.body.append(parent);
</li>
</ul>

<div class="note">
<p>These requirements ensure a number of goals for <span data-x="valid custom element name">valid
custom element names</span>:</p>

<ul>
<li><p>They start with an <span>ASCII lower alpha</span>, ensuring that the HTML parser will
treat them as tags instead of as text.</li>

<li><p>They do not contain any <span data-x="ASCII upper alpha">ASCII upper alphas</span>,
ensuring that the user agent can always treat HTML elements ASCII-case-insensitively.</p></li>

<li><p>They contain a hyphen, used for namespacing and to ensure forward compatibility (since no
elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the
future).</p></li>

<li><p>They can always be created with <code
data-x="dom-Document-createElement">createElement()</code> and <code
data-x="dom-Document-createElementNS">createElementNS()</code>, which have restrictions that go
beyond the parser's.</p></li>
</ul>

<p>Apart from these restrictions, a large variety of names is allowed, to give maximum
flexibility for use cases like <code data-x="">&lt;math-α></code> or <code
data-x="">&lt;emotion-😍></code>.</p>
</div>
<p>Apart from these restrictions, a large variety of names is allowed, to give maximum
flexibility for use cases like <code data-x="">&lt;math-α></code> or <code
data-x="">&lt;emotion-😍></code>.</p>

<div w-nodev>

<hr>

<p>A <dfn>custom element definition</dfn> describes a <span>custom element</span> and consists
of:</p>

Expand Down