CODEWITHSUNDEEP
javascripthtmlcsssvelte
user19485937
user19485937

Reputation:

share CSS variable var() to :global() svelte parent component reactivelly?

I tried to put the minimal example: (not real code, but similar and simpler to demonstrate the problem)

<script>
let parentOverflow = false;

function setParentOverflow() {
  if(parentOverflow) return 'hidden'
  return 'auto'
}
</script>

<div 
  style="--parent-overflow:{setParentOverflow()}"
  transition:scale={{duration: 2000}}
  on:introstart={() => (parentOverflow = true)}
  on:introend={() => (parentOverflow = false)}
> 
  hello world
</div>

<style>
  :global(.parent) {
    overflow: var(--parent-overflow);
  }
</style>

As you see I am using :global() in the style tag,

which means you can style globally also the parent div

everything work fine in all the code (functions, styles, transitions, introstart, introend)

❌ but overflow: var(--parent-overflow) give me the problem

technically in dev tools is shown (so the parent have the style, see image below)

enter image description here

but the the parent can't have the var(), yes, because ✅ if I write overflow: hidden work very good.

but var() not.

is there a way to pass also var() the value reactively to the parent?

another info is that if a child works fine the var()

I can't move the code function to the parent since the animation happens on the child.

but I can pass/export in some way a prop if there is a way for the parent and then write the CSS there.

I am open to everything that can make pass the returned value of the function to the parent and then style the parent reactively from child var.

also if the class .parent is present to multiple is there a way to only change the parent one of the child, and not all .parent?

<parent> <!-- yes only this --> 
  <child>
<parent>

<parent> <!-- don't change this -->

<parent> <!-- the child style on the first don't need to change this, because they are totally different things --> 
  <child>
<parent>

basically a concept like this .closest() https://developer.mozilla.org/en-US/docs/Web/API/Element/closest?retiredLocale=it (but without javascript, only css :global())

to mention .closest() can't work correctly in svelte so isn't worth it. I think can be a way with only CSS only (or svelte magic)

sorry for the long details, but I tried to put everything I know.

If you more details tell me I will add them too.

thanks for reading :)

Upvotes: 0

Views: 582

Answers (1)

Corrl
Corrl

Reputation: 7699

If Child and Parent component are connected via slot

<Parent>
    <Child />
</Parent>

you could use setContext / getContext for the communication. Like this only a Parent and it's Children share the information, the other sibling Parent components are not affected. A store is used so that the value is reactive. REPL

Parent.svelte
<script>
    import {setContext} from 'svelte'
    import {writable} from 'svelte/store'
    const parentOverflow = writable('hidden')
    setContext('parentOverflow', parentOverflow)
</script>

<div class="parent" style:overflow={$parentOverflow}>
    <slot />
</div>
Child.svelte
<script>
    import {scale} from 'svelte/transition'
    import {getContext} from 'svelte'
    let parentOverflow = getContext('parentOverflow')
</script>

<div transition:scale="{{duration: 2000}}"
         on:introend="{() => ($parentOverflow = 'auto')}"
         > 
    Lorem ipsum dolor sit amet, ...
</div>

Upvotes: 1

Related Questions