Custom element support?

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
Post Reply
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Custom element support?

Post by TomHTML »

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
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: Custom element support?

Post by TomHTML »

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
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: Custom element support?

Post by TomHTML »

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
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Custom element support?

Post by Albert Wiersch »

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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply