five-server-vscode
five-server-vscode copied to clipboard
yandeu
"<dialog> is not a valid element name" error
Describe the bug
Given the following code, an error is displayed: <dialog> is not a valid element name
<!DOCTYPE html>
<html>
<head>
<title>HTML Test File</title>
</head>
<body>
<h1>It works!</h1>
<dialog>
Hello
</dialog>
</body>
</html>
The error displays in 2 places:
- in Chrome (102) preview:
<dialog> is not a valid element name at line: 8 - in VSCode on line 8 of the index.html file:
// <dialog> is not a valid element name
This element is valid and widely supported by modern browsers: https://caniuse.com/?search=dialog Can the "valid element" list be updated? Is there a way to disable the error?
fiveserver.config.js config:
module.exports = {
highlight: true, // enable highlight feature
injectBody: true, // enable instant update
remoteLogs: true, // enable remoteLogs
remoteLogs: "yellow", // enable remoteLogs and use the color yellow
injectCss: false, // disable injecting css
navigate: true, // enable auto-navigation
};
VSCode: 1.67.2 yandeu.five-server: v0.1.5 OS: Ubuntu WSL on Win10
Have a question? Join the discussions instead.
I guess we could turn off this rule: https://html-validate.org/rules/element-name.html
Or we could try updating html-validate.
https://github.com/yandeu/five-server/blob/8bf87e0cc644b6e58b30b49e830aa89b777207b9/package.json#L62
@yandeu
I think the rule is important. It is better to keep it in.
html-validate is at 7.1.1 now but it also required node 12.
If the bump doen't break anything, it might be the better option. That's upstream though, so I have no idea what/where "five-server" is used.
It even requires node 14: https://html-validate.org/changelog/index.html
But I'm not sure if they have added support for <dialog>
I found the solution:
const htmlvalidate = new HtmlValidate({
// https://html-validate.org/rules/index.html
rules: {
'close-attr': 'error', // necessary
'close-order': 'error', // necessary
'element-name': [
'error',
{
whitelist: ['dialog']
}
], // necessary
deprecated: 'error',
'no-dup-attr': 'error',
'no-dup-class': 'error',
'no-dup-id': 'error'
}
})
That looks good. It would also make it easier to update the list if other "not valid" elements appear in the future.