style slotted items | Qwik | Page 1

#

Hello, how can I style slotted items?

My component:

import styles from './slider-item.css?inline';

export default component$(({ headline }: Props) => {
    useStylesScoped$(styles);

    return (
        <div
            class="slider-item"
            onClick$={e => (e.target as HTMLElement).scrollIntoView({ behavior: 'smooth' })}
        >
            <Slot />
            <div class="content">
                <h2>{headline}</h2>
            </div>
        </div>
    );
});

Used in index.tsx as:

  <img src="xxxx" />
</SliderItem>```

#

Appreciate any help

#

Like my understanding is I can't access props.children before rendering with useTask$() to add inline styles to each slotted item

#

are there any other best practices?

#style slotted items