ReactShadow
ReactShadow copied to clipboard
How can I use Shadow DOM content distribution with `react-shadow`? ( mix light with shadow, use `<slot>`)
I would like to use slot
element in my shadow root, to distribute some light there.
https://codesandbox.io/s/react-shadow-forked-ecmem?file=/public/index.html:1591-1932
<div class="quote">
<template shadowroot="open">
<style>
q {
font-family: Times, "Times New Roman", serif;
font-size: 2em;
}
</style>
<q>There is strong shadow where there is <slot></slot>.</q>
<slot name="author">unknown</slot>
</template>
much light
<e.Author slot="author">― Johann Wolfgang von Goethe.</e.Author>
</div>
So, far I was able to make everything render in shadow root, but I'd like my component to distribute also light DOM.
How could I add some light content to the shadow host?
@tomalec Did you ever find an answer to this problem? I am in the same situation.
I also have similar situation, @tomalec and @Anifacted Did you find an answer? 👀
so, slot is not supported in react-shadow?