Targeted style inheritance

[ghughes]

Rendered

[ghughes]

Previous ideas and discussion:

• Passing CSS custom properties to components #13
• Allow parent to impact child component CSS #22
• RFC: Scoped Style Attribute svelte#901
• Passing class to components svelte#2870
• <style bind:styles={styles}> and <style styles={styles}> - CSS Binding and Passing scoped styles between components and scoped svelte CSS import. svelte#6422
• Introduce <style module> — update: forward directive svelte#6972

[lukaszpolowczyk]

@ghughes See about the broader proposal "Targeted slots" (oddly similar name :O):

She's about Declarative Actions and Forward Directive, but it would work for passing styles too.
#41 (comment)
#60 (comment)

I recommend reading both threads, as I don't have one separate rfcs for this, and I discuss various details in both.

Targeted Styles and Targeted Slots are quite similar, but they do get rid of some of the problems you write about in your rfcs.
Perhaps it is possible to combine the two proposals. Still need to think about it, because I'm not sure.

Two people liked it. We'll see what happens next.

[lukaszpolowczyk]

@ghughes Check out my RFCS:
#68 - Targeted Slots - passing and mixing attributes and styles to component, access the slotted element from inside the component

Among other things, I write there about something that will solve almost all the problems from your RFCS.
There are examples.

[lukaszpolowczyk]

@ghughes I just added changes that solve all the problems from your RFC.
Please check it out, and rate it! - #68

[AdaptingAFM]

have you thought about components having a default slot which is consumed when using a <style> block as their children?

/**
/ Parent Component
*/

<script lang='ts'>
  import Child from './Child.svelte';
</script>

<Child>
  <style lang='scss'>
    /* styles that would be added to the hoisted components' stylesheet — elements would be targeted & scoped directly by either using the components generated hash class or by adding a local style tag to the dom */

    div { background-color: green; }
  </style>
</Child>

<style lang='scss'>
  /* ...styles of the parent itself */
</style>

/**
/ Child Component
*/

<div>
  Hello!
</div>

<style lang='scss'>
  :where(div) { background-color: red; }
</style>

[DylanYoung]

Maybe I'm missing something, but isn't the solution to this and related issues already speced?

See https://developer.mozilla.org/en-US/docs/Web/CSS/::part