我在一个网站中使用angular ui select,该网站的样式选择字段配置有一个名为ui-select
的标记。这很有效,但进行W3C验证会导致以下错误:
在此上下文中,元素
ui-select
不允许作为元素div
的子元素。(抑制该子树中的进一步错误。)
下面是一个示例代码:
<!doctype html>
<html lang="en">
<head><title>x</title></head>
<body>
<div>
<ui-select></ui-select>
</div>
</body></html>
我知道<ui-select>
预计不会出现在那里,但我如何才能更好地处理这个问题?
我可以把它包装成不同的标签吗?或者ui-select
有不同的方法而不是使用HTML标记吗?
W3C HTML5验证器的维护人员。关于验证器行为,目前的简单答案是,验证器将为您在文档中使用的任何自定义元素发出错误,而目前作为用户,您无法解决这一问题,而且这种情况还会持续一段时间,直到我们找到解决方案。
我们正在讨论如何解决这个问题。作为一个完整的解决方案,将验证器更改为只忽略任何带连字符的元素名称是不可行的,因为这样做的结果是,我们实际上无法检查它可能具有的任何子元素——我们只能忽略整个子树,因为否则会导致其他错误。因此,这还远远不是一个理想的解决方案。
不管怎样,我很想找到一个好的方法来解决这个问题,所以如果其他人有想法,我很想听。发送这方面的想法/建议的两个好地方是public-webapps@w3.org邮件列表https://lists.w3.org/Archives/Public/public-webapps/以及whatwg@whatwg.org邮件列表https://whatwg.org/mailing-list#specs
我自己想到的一个想法是,我们可以让验证器以当前处理<div>
元素的方式处理所有自定义元素(只要它在文档中允许的位置和允许包含的子元素)。这也不够理想,但至少它可以提供一种方法来检查自定义元素子树中的子元素中的错误。
更新2017-02-06:W3C HTML Checker现在支持自定义元素
因此,我在2016-12-16向W3C HTML检查器(验证器)添加了对自定义元素的支持,并在几天后对其进行了改进,以对禁止的名称进行更详细的检查。
我最终想出的在检查器体系结构中实现它的诀窍是添加一个预处理过滤器,该过滤器接受元素名称中带有连字符的任何元素,并将它们放在一个单独的XML命名空间中。检查器体系结构的核心是基于RelaxNG语法/模式的验证器。
然后,我更新了RelaxNG模式,允许在任何地方使用该XML命名空间中的任何元素。(这很讽刺,因为我非常讨厌XML名称空间以及它们引起的所有问题。)
因此,我们现在正在考虑对自定义属性名称执行类似的操作——可能只是将这些名称定义为包含连字符的任何属性名称(如自定义元素名称)。
但是HTML检查器不能更改为允许自定义属性名称,直到HTML规范更新为允许它们。为此,请参阅HTML规范问题跟踪器中正在讨论的建议。
这确实是AngularJS的一个众所周知的问题。
你可以做的几件事:
您可以使用<div ui-select>
,而不是使用元素<ui-select>
,但这在参数中仍然会失败。
前缀为x-
或data-
的参数将通过,但我不确定ui-select
是否支持。
HTML W3C验证是有用的,但我认为最重要的是HTML电子邮件,这样它们就不会被筛选为垃圾邮件。它对搜索引擎也有好处,但确实不是关键的。
如果你看看"为什么验证",原因主要是清洁、易于调试和总体良好实践。
幸运的是,Angular(un?)扩展了HTML5的可能性领域,其方式自然偏离了HTML的最新规范。
我们在使用Knockout自定义组件时也遇到了同样的问题。http://knockoutjs.com/documentation/component-overview.html
我添加了一个建议,即即使规范还不是最终规范,也要对想要使用自定义元素的用户进行轻微的增强,以增强验证器(http://w3c.github.io/webcomponents/spec/custom/#custom-标签示例):
https://github.com/validator/validator/issues/94