rviscomi / capo.js

Get your <head> in order

Home Page:https://rviscomi.github.io/capo.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flag invalid elements

rviscomi opened this issue · comments

Content model:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.

https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

https://html.spec.whatwg.org/multipage/dom.html#metadata-content-2

Ensure there is:

  • exactly one <title>
  • no more than one <base>
  • only the listed valid elements

Prototyping this and found an interesting example of a div in the YouTube head
image

The example above shows that this is prone to false positives when run on a CSR <head> post-load. Those "invalid" elements were dynamically added and I don't think they would actually be problematic. BigQuery or WPT custom metric would be more accurate, but I'm not sure if I want to add validation to the BQ function.

Haha ok so the client-side script should not actually be able to detect an invalid element that was sent by the server. The HTML parser will see the invalid element and assume the head is closed. The only invalid elements it'll pick up are ones added by the client itself (via JS), which aren't really of interest.

So maybe the right path forward is to omit the check from the snippet and extension, but add it to BQ and WPT.