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

功能说明

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

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

开启方法

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

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

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

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

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

自定义滑块样式：

/* 修改滑块按钮（拖动的圆点） */
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- 伪元素选择器自定义样式（非标准特性，注意兼容性）