search

dtn9197 / herocard

this repository uses web components to make a herocard
MIT License
0 stars 0 forks source link

::slotted selector needs something before it #8

Closed btopro closed 4 years ago

btopro commented 4 years ago

Because slotted is a bit weird; this won't work unless it looks like :host * ::slotted(img). Slotted is a bit of a hack in the spec to be honest and I'm surprised they ever accepted it since it doesn't work for anything below the 1st level children

https://github.com/dtn9197/herocard/blob/6672dc674a57a37de3c8076e355fe3ed443f2540/src/HeroCard.js#L46

dtn9197 commented 4 years ago

can you elaborate on this. These selectors definitely work when i remove and re-insert to test. You're right they don't work on 1st level elements.

btopro commented 4 years ago

::slotted has to have something before it. So let's say your structure is

<div>
<slot></slot>
</div>

Then you could do a css selector of div ::slotted(img) which will apply only to images at the 1st level that show up in the slotted area. Still though, ::slotted needed that div selector before it to do anything