What are these HTML <c- g> tags? Undefined custom element?

Viewed 63

When looking at the source code of the HTML standard there were some tags that I didn't recognise..

For example in this snippet:

    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlparagraphelement' data-dfn-type='interface'><c- g>HTMLParagraphElement</c-></dfn> : <a id='the-p-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-p-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  // <a href='obsolete.html#HTMLParagraphElement-partial'>also has obsolete members</a>
};</code></pre>

From https://html.spec.whatwg.org/multipage/grouping-content.html

I thought these may be custom elements, but it doesn't look like they are defined via the custom element registry.. This is the result of interrogating the customElements object.

>>> customElements.get('c')
undefined
>>> customElements.get('c-')
undefined

Is this allowed? (I'd guess so since it's from the HTML standard, but it's still surprising to me). How would the browser know how these elements are supposed to be displayed? For example display: block vs. display: inline.

1 Answers

These are custom-elements (and valid HTML), generated by bikeshed's highlighter.

There is no need to define these as customElements because they don't bring any particular behavior, all they do is to ... save bandwidth.

Here is the commit excerpt:

TERRIBLE-HACK-ALERT Switch to using <c- kt> instead of <span clas…

…s='kt'> to cut the weight of highlighting in half. Still valid HTML!

So apparently by switching from <span class="kt"> to <c- kt> (and span.kt { to c-[kt]{) they saved half of the weight induced by their highlighting.

Though as they say, it's a "terrible-hack", which still can make sense when building a tool that generates the majority of Web Standards pages, which can get very lengthy.


Regarding the default display of such custom-element, I'll quote Alohci's comment which did put it nicely:

All elements take the initial, or inherited for inherited properties, value of each CSS property until specified otherwise. So they would be display:inline


And regarding your expectation to see only best practices in the specs sources, it's better not assume so. Read the content of these pages, don't look at how they're built.
Most HTML editors don't look at the tools that will generate the pages, they write the specs in a pseudo-HTML language full of templates.
Or as it's put in the source:

<!-- Note: This file is NOT HTML, it's a proprietary language that is then post-processed into HTML. -->
Related