为何CSS ::part会覆盖JavaScript设置的element.style样式？

问题原因 #

这是Firefox浏览器处理自定义元素::part样式时的已知实现bug：

• 按照CSS优先级规则，元素的行内样式（element.style）优先级本应远高于外部定义的::part样式，但Firefox的样式计算引擎在此处出现错误，错误地让::part样式覆盖了行内样式。
• DevTools的Rules面板显示行内样式划掉::part声明属于视觉误导，实际计算样式和渲染效果都采用了::part的值，与面板显示不一致。

解决办法 #

1. 使用CSS变量间接控制样式 #

通过CSS变量作为中间层，避免行内样式和::part直接冲突：

• 外部CSS定义：

my-element::part(input) {
  padding-right: var(--input-padding-right, 1px);
}

• 自定义元素内JS修改：

this.input.style.setProperty('--input-padding-right', '25px');

这种方式让::part样式依赖变量，JS通过修改变量值控制最终样式，不会触发优先级冲突的bug。

2. 在Shadow DOM内部修改样式 #

绕过::part的外部样式，直接在自定义元素的Shadow DOM内部通过类或样式表修改目标元素：

• 调整模板，给input添加内部类：

<input type="text" part="input" class="internal-input"/>

• 在自定义元素类中添加内部样式规则：

// 方法A：动态添加样式表
const style = document.createElement('style');
style.textContent = `.internal-input { padding-right: 25px; }`;
this.shadowRoot.appendChild(style);

// 方法B：通过类切换（更灵活）
this.input.classList.add('custom-padding');
// 提前在Shadow DOM的样式表中定义：
// .custom-padding { padding-right: 25px; }

Shadow DOM内部的样式优先级高于外部的::part样式，能确保修改生效。

3. 跨浏览器测试与兼容 #

如果需要兼容多浏览器，可以测试Chrome/Edge等其他浏览器，这类bug通常是Firefox专属。若仅需兼容Firefox，可暂时采用上述两种方法，同时关注Firefox的bug修复进度。

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