ReactShadow icon indicating copy to clipboard operation
ReactShadow copied to clipboard

How can I use Shadow DOM content distribution with `react-shadow`? ( mix light with shadow, use `<slot>`)

Open tomalec opened this issue 3 years ago • 3 comments

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 avatar May 02 '21 15:05 tomalec

@tomalec Did you ever find an answer to this problem? I am in the same situation.

Anifacted avatar Mar 10 '22 13:03 Anifacted

I also have similar situation, @tomalec and @Anifacted Did you find an answer? 👀

Dihgg avatar Jan 05 '23 01:01 Dihgg

so, slot is not supported in react-shadow?

xy1041 avatar Jun 15 '23 07:06 xy1041