Custom element support?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Custom element support?

Post by TomHTML » Thu Mar 22, 2018 11:48 am

Is there a reason why the validator does not recognize custom elements that conform to this spec?

https://developer.mozilla.org/en-US/doc ... m_elements

I tried using <x-nav> as an element, and the validator complained, "The "x-nav" element is not valid. Is it misspelled?"

Perhaps a warning that they are only fully implemented in certain browsers, and to check for implementing?

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch » Thu Mar 22, 2018 12:32 pm

Hello,

CSS HTML Validator doesn't currently support custom elements but I will look into adding this in an update.

If you could send me some test documents using custom elements then that would be appreciated and helpful for testing when I start work on this, perhaps my "big addition" for an end of April update (but no promises :) ).

Oh, in the pro edition and higher you can add your own elements and write your own user-functions to customize the validation. This might be a good workaround in the meantime.
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Re: Custom element support?

Post by TomHTML » Wed Apr 18, 2018 7:21 pm

I recently began studying AMP coding, and it turns out to make use of custom elements extensively. Apparently, all AMP custom elements begin with the prefix "amp-", e.g.:

Code: Select all

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
An example AMP page that makes extensive use of them is this page at Vox:

https://www.vox.com/platform/amp/scienc ... active-map

I used the helpful method of right-clicking and copying the main <html> element in Chrome's Developer's Tools source view to bring the contents into the Validator, and it complains about the "amp-" elements.

The extent of the employment of this subspecies of HTML is quite large, according to this year-old article: https://techcrunch.com/2017/05/18/googl ... 2x-faster/

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch » Wed Apr 18, 2018 9:19 pm

Thank you. Right now I am working on improved/updated CSS masking support and support for conic-gradient and repeating-conic-gradient and this is next on my to-do list for 18.02, which I hope to release late this month or early next. I will be sure to take a look at those links.
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Re: Custom element support?

Post by TomHTML » Fri Apr 20, 2018 1:12 pm

Great to hear. Also, you might look at the spec for Polymer, which is used for Material Icons design. It also uses custom tags that simply employ a hyphen in the element name, but there's no consistent prefix like "amp"; they simply follow the HTML spec for allowing custom tags so long as a hyphen is present in the name. For reference, see: https://www.polymer-project.org/2.0/start/quick-tour

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch » Mon May 14, 2018 11:50 am

I've just released CSS HTML Validator 2018/v18.02 which has support for custom elements if the custom element support option is enabled (it is by default). This should make it easier and more useful when checking documents that use custom elements.

This is the initial release with custom element support so if I missed something or there are any improvements to be made then please let me know.
Image
Albert Wiersch

Post Reply