如何自定义HTML标签并通过W3C验证？解决<style>元素置于<body>内的验证错误问题

我来帮你搞定这两个问题——首先是W3C验证报错，然后是自定义元素的规范优化：

1. 为什么会出现W3C验证错误？ #

你收到的Element style not allowed as child of element body in this context报错，核心原因是HTML规范要求<style>标签必须放在<head>标签内（除了早已废弃的scoped属性用法）。把样式代码直接塞在<body>里会破坏文档结构，自然过不了W3C的结构验证。

2. 自定义元素的规范优化 #

虽然你的自定义元素代码能正常运行，但按照Web Components的行业规范，自定义元素的类名应该使用大驼峰命名法（对应标签名的短横线分隔规则），比如标签tab-content-body对应的类名应该是TabContentBody。这样的命名方式更易读，也符合主流的组件开发惯例。

修正后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
<!-- 把style标签移到head内，符合HTML规范 -->
<style> 
  tab-content-body { 
    color: brown; 
  } 
</style> 
</head> 
<body> 
<tab-content-body class="d">Hello</tab-content-body> 
<script> 
  // 改用大驼峰命名类名，符合Web Components规范
  class TabContentBody extends HTMLElement {
    constructor(){ 
      super(); 
    } 
  } 
  customElements.define('tab-content-body', TabContentBody); 
</script> 
</body> 
</html>

验证结果 #

现在把这段代码拿去W3C验证，就能顺利通过了。如果之后你需要给自定义元素添加更复杂的样式或功能，也可以基于这个规范的结构继续扩展~

内容的提问来源于stack exchange，提问作者cenica