Element 面板 - 查看 Shadow DOM - 浏览器原生组件内部结构

功能说明

浏览器原生组件（如 <input>、<video>、<select> 等）内部使用 Shadow DOM 封装结构和样式。Shadow DOM 是 Web Components 的核心技术，用于隔离组件内部代码，避免与外部冲突。

关于样式前缀 ：自定义原生组件样式时常见 -webkit- 前缀（如 ::-webkit-scrollbar），这是 WebKit/Blink 引擎特有的伪元素选择器。由于 Chrome、Safari、Edge (新版) 等主流浏览器均使用该引擎，-webkit- 已成为事实标准。Firefox 等浏览器也支持部分 -webkit- 伪元素以保持兼容性。

开启方法

打开开发者工具（F12）→ 设置 ⚙️（或按 F1）
Preferences → Elements → 勾选 Show user agent shadow DOM

实际案例：查看 input[type="range"] 滑块的内部结构

html 复制代码

<input type="range" min="0" max="100" value="50">

开启 Shadow DOM 后，在 Elements 面板中可以看到：

html 复制代码

<input type="range" min="0" max="100" value="50">
  #shadow-root (user-agent)
    <div id="track">
      <div id="thumb"></div>
    </div>

自定义滑块样式：

css 复制代码

/* 修改滑块按钮（拖动的圆点） */
input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  background: #3498db;
  cursor: pointer;
  border-radius: 50%;
}

/* 修改滑动轨道 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

⚠️ 兼容性提示 ：这些是非标准特性，主流浏览器使用 -webkit- 前缀即可

常用伪元素选择器

元素	伪元素选择器	说明
`<input type="range">`	`::-webkit-slider-thumb`	滑块按钮
`<input type="range">`	`::-webkit-slider-runnable-track`	滑动轨道
`<input type="search">`	`::-webkit-search-cancel-button`	清除按钮
`<input type="file">`	`::-webkit-file-upload-button`	文件上传按钮
`<input type="date">`	`::-webkit-calendar-picker-indicator`	日历图标
`<progress>`	`::-webkit-progress-bar`	进度条容器
`<progress>`	`::-webkit-progress-value`	进度条值

总结

✅ 开启 Show user agent shadow DOM 可查看浏览器组件内部结构
✅ 使用 -webkit- 伪元素选择器自定义样式（非标准特性，注意兼容性）