如何在Shadow DOM中为::slotted插槽元素添加hover悬停效果

需要分两种场景处理，对应slot的默认 fallback 内容和外部传入的插槽内容，两种场景的样式写法完全不同：

场景1：给slot自带的默认图标加hover #

你代码里写在<slot>标签内部的<i class="icon-name"></i>属于插槽的默认回退内容，当外部没有传入对应具名slot的内容时才会显示，这个元素本身归属于当前Shadow DOM，不受样式隔离限制，直接在Shadow DOM的内部样式表中选中该类名写hover即可：

/* 以下样式写在自定义元素挂载的Shadow DOM内部style标签中 */
.icon-name {
  font-size: 18px;
  color: #666;
  transition: all 0.2s ease;
}
/* 直接给默认图标加hover效果 */
.icon-name:hover {
  color: #2563eb;
  transform: scale(1.1);
  cursor: pointer;
}

场景2：给外部传入slot的内容加hover #

如果是业务使用时往name="item"插槽传入的自定义图标元素，这类元素属于Light DOM（外部文档流），Shadow DOM无法直接穿透选中，需要使用::slotted()伪元素选择器匹配插入到对应插槽的直接子元素：

/* 匹配所有插入到name="item"插槽的直接子元素 */
::slotted([slot="item"]) {
  transition: all 0.2s ease;
  color: #666;
}
/* 给传入的插槽元素加hover效果 */
::slotted([slot="item"]:hover) {
  color: #2563eb;
  cursor: pointer;
}

注意事项 #

• ::slotted() 只能选中直接插入插槽的一级元素，如果你传入的内容外层包了div、span等容器，图标是容器的后代元素，这个选择器无法命中内部的icon，这种场景建议要么直接将图标元素作为插槽的直接子节点传入，要么在外部Light DOM中自行给图标写hover样式。
• ::slotted() 选择器的权重低于外部Light DOM给元素设置的样式，如果外部给传入的图标写了更高权重的color、transform等属性，Shadow DOM内的slotted样式会被覆盖，不推荐强行加!important提升权重，涉及自定义传入内容的样式交互最好暴露对应的自定义属性或类名给外部控制。
• 不要尝试在Shadow DOM中直接写.icon-name:hover匹配外部传入的图标，这个选择器只能命中slot内部的默认回退图标，无法选中外部插入的Light DOM元素。

内容的提问来源于stack exchange，提问作者Raashid A.