form-dup-name and no-dup-id for elements inside of <template>
While element id and input name should indeed be unique across the document, it does not seem to be the case for things inside of 'template'. Until template is actually imported into the document, elements contained within are not accessible through the usual means.
- https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#usage_notes
Reduced test-case
<html lang="">
<head><title>Test</title></head>
<body>
<template id="foo">
<label for="stuff">Foo</label>
<input name="stuff" id="stuff" type="checkbox">
</template>
<template id="bar">
<label for="stuff">Bar</label>
<input name="stuff" id="stuff" type="checkbox">
</template>
<div id="container"></div>
<script>
let templates = document.getElementsByTagName("template");
let tmpl = templates[Math.floor(Math.random() * templates.length)];
let node = tmpl.content.cloneNode(true);
let root = document.getElementById("container");
root.appendChild(node);
</script>
</body>
</html>
(in the real project, these are different enough to justify two templates instead of one)
Configuration
Default
Expected result
No errors should be displayed.
Actual result
> ./node_modules/.bin/html-validate test.html
/home/runner/test.html
10:18 error Duplicate form control name "stuff" form-dup-name
10:29 error Duplicate ID "stuff" no-dup-id
✖ 2 problems (2 errors, 0 warnings)
More information:
https://html-validate.org/rules/form-dup-name.html
https://html-validate.org/rules/no-dup-id.html
Version
-
html-validate
: html-validate-8.17.0