Skip to content

Conversation

@10p-freddo
Copy link

@lukaszpolowczyk
Copy link

lukaszpolowczyk commented Aug 5, 2022

@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
Copy link

lukaszpolowczyk commented Aug 7, 2022

@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
Copy link

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

@AdaptingAFM
Copy link

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
Copy link

DylanYoung commented Mar 19, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants