如何样式化浏览器生成的#shadow-root DOM元素

我想要样式化浏览器生成的#shadow-root中的input元素，但一直没成功。我知道这不是推荐做法，但有必须满足的设计要求。目前找到的解决方案要么已经废弃，要么是用JavaScript添加:part，但这好像只适用于自定义生成的#shadow-root，对浏览器自带的无效？有没有我没注意到的可行方法？

示例代码：

<input type="file" name="resume">

在Chrome中，它的DOM结构如下：

<input type="file" name="resume">
  #shadow-root (user-agent)
    <input type="button" value="Choose file" pseudo="-webkit-file-upload-button" id="file-upload-button">
      #shadow-root (user-agent)
        "Choose file"
    </input>
    <span aria-hidden="true">No file</span>
</input>

1. 使用浏览器支持的伪元素直接样式化（针对WebKit/Firefox内核） #

对于Chrome、Safari这类WebKit内核浏览器，原生file input的上传按钮可以通过::-webkit-file-upload-button这个伪元素直接样式化，无需操作shadow root：

input[type="file"]::-webkit-file-upload-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: #1d4ed8;
}

Firefox单独支持::-moz-file-upload-button，可针对性适配：

input[type="file"]::-moz-file-upload-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

这种方法是目前针对原生file input最直接的样式化方式，虽带浏览器前缀，但属于浏览器长期支持的特性，能覆盖大部分主流场景。

2. 隐藏原生input，用自定义元素模拟（兼容性/可控性更强） #

如果需要完全自定义样式且兼容所有浏览器，更稳妥的方案是隐藏原生file input，用自定义按钮和文本区域模拟功能：

<div class="file-upload-container">
  <button class="custom-upload-btn">选择文件</button>
  <span class="file-name">未选择文件</span>
  <input type="file" name="resume" class="hidden-file-input">
</div>

.hidden-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.file-upload-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.custom-upload-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.custom-upload-btn:hover {
  background: #1d4ed8;
}

.file-name {
  color: #374151;
}

const uploadBtn = document.querySelector('.custom-upload-btn');
const hiddenInput = document.querySelector('.hidden-file-input');
const fileNameDisplay = document.querySelector('.file-name');

uploadBtn.addEventListener('click', () => {
  hiddenInput.click();
});

hiddenInput.addEventListener('change', () => {
  if (hiddenInput.files.length > 0) {
    fileNameDisplay.textContent = hiddenInput.files[0].name;
  } else {
    fileNameDisplay.textContent = '未选择文件';
  }
});

这种方式完全脱离原生input的样式限制，所有元素可自由定制，同时保留原生文件选择功能，是生产环境中更推荐的方案。

关于:part的说明 #

:part确实仅适用于自定义元素的shadow root，浏览器自带的user-agent shadow root不支持该特性，因此无法通过此方法样式化原生组件的内部元素。

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