如何让Shadow DOM的:focus关联样式优先级高于外部::part伪选择器？

问题原因 #

外部样式#disTick::part(endo)的CSS特异性高于内部的input:focus + .endo.tick：

• 外部选择器：#disTick是ID选择器（权重100），::part(endo)的权重等同于类选择器（权重10），总权重为110。
• 内部选择器：:focus是伪类（权重10），.endo和.tick是两个类选择器（各10，合计20），总权重为30。
  权重更高的外部样式自然覆盖了内部的box-shadow规则。

无需新增PART的解决方案 #

1. 提升内部选择器的特异性 #

通过给Shadow DOM内部的元素增加更具体的选择器，让内部样式权重超过外部：
比如给内部的input添加ID（如#toggleInput），修改内部样式为：

#toggleInput:focus + .endo.tick,
#toggleInput:hover + .endo.tick {
  box-shadow: 0 0 0.5em var(--toggle-highlight-color, rgba(0,0,0,0)); 
}

此时内部选择器的权重为：ID（100）+ 伪类（10）+ 两个类（20）= 130，超过外部的110，就能覆盖外部样式。

2. 使用!important强制优先级 #

直接在内部样式的box-shadow属性后添加!important，强制该规则优先生效：

input:hover + .endo.tick,
input:focus + .endo.tick {
  box-shadow: 0 0 0.5em var(--toggle-highlight-color, rgba(0,0,0,0)) !important; 
}

这种方法无需修改DOM结构，只要外部样式没有使用!important，内部规则就会优先被应用。

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