Search code examples
htmlangularjsw3c-validationui-select

W3C validation for <ui-select>

I am using angular-ui-select within a website where the styled select fields are configured with an own tag named ui-select. This works great, but doing a W3C validation leads to this error:

Element ui-select not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

Here's an example code:

<!doctype html>
<html lang="en">
<head><title>x</title></head>
<body>
 <div>
  <ui-select></ui-select>
 </div>
</body></html>

I understand that <ui-select> is not expected to be there but how can I handle this better?

Can I wrap it into a different tag or is there a different approach for ui-select instead of using HTML markup?

Solution

  • That's indeed a long-known issue with AngularJS.

    A few things you can do:

    Instead of using the element <ui-select>, you can use <div ui-select>, but that will still fail on the argument.

    An argument prefixed with x- or data- will pass but I am not sure ui-select supports that.

    HTML W3C validation is useful, but I think mostly important for HTML emails so they don't get screened as spam. It's also good for search engines, but really not that critical.

    If you look at 'why validate', the reasons are mostly for cleanliness, ease of debugging, and overall good practice.

    Angular (un?)fortunately expands the realm of possibilities for HTML5, in a way that, naturally, deviates from the latest specifications for HTML.