Shadow DOM委托焦点样式问题：CSS选择器失效及优先级疑问

核心问题是选择器优先级匹配错误，导致:focus样式被#disTick::part(endo)的基础样式覆盖：

• 基础样式选择器#disTick::part(endo)的优先级为「ID选择器（100）+伪元素（10）」，权重110
• 若你的:focus样式仅写为#disTick:focus，优先级是「ID选择器（100）+伪类（10）」，权重同样为110，此时声明顺序靠后的样式会生效——这就是基础样式能覆盖:focus，但:hover（若写法为#disTick:hover::part(endo)）可以正常覆盖的原因（后者包含了::part(endo)，权重更高）

正确写法是将:focus伪类与::part(endo)结合，提升选择器权重：

#disTick:focus::part(endo) {
  box-shadow: /* 你的焦点样式 */;
}

该选择器权重为100+10+10=120，完全覆盖基础样式的110权重，即可正常生效。

开启delegatesFocus后，焦点会委托给Shadow DOM内的第一个可聚焦元素，但自定义元素本身仍会触发:focus状态。#disTick:focus无效的核心原因是选择器作用域不匹配：

• 若样式写在自定义元素的Shadow DOM内部：无法直接用#disTick选中外部的自定义元素，需用:host伪类指代自定义元素本身，正确选择器为：

:host:focus {
  /* 自定义焦点样式，例如 outline: 2px solid #0066cc; */
}

• 若样式写在Light DOM中：#disTick:focus理论上应生效，但如果Shadow DOM内的元素自带默认焦点轮廓，需先在Shadow DOM的样式中清除默认样式：

:focus {
  outline: none;
}

再在Light DOM中编写#disTick:focus的自定义样式即可。

此外，若要针对「自定义元素或其内部元素获得焦点」的场景，可使用:host:focus-within，它会在自定义元素或其Shadow DOM内元素获得焦点时触发样式。

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