CSS: How add hover effect to ::slotted in Shadow DOM root and

Question

I have have shadow DOM element,

<div>
     <slot name="item"> <i class="icon-name"> </i> </slot>
</div>

I wanted to have hover effect to "Icon" how to write hover effect for slot element ?

slotted content is styled in **lightDOM** See: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 — Danny '365CSI' Engelman, Jun 15 '22 at 15:44
Note: your code is not the result of slotting content; slotted content is **reflected** to a ```` NOT copied or moved — Danny '365CSI' Engelman, Jun 15 '22 at 15:49

score 1 · Answer 1 · answered Jan 19 '23 at 22:34

1

This only works with css in the Shadow Dom. I found it here: https://codepen.io/smspp/pen/EzYGpa

::slotted(*:hover)

answered Jan 19 '23 at 22:34

HomeSlice

1 Answers1