rfcs
rfcs copied to clipboard
sveltejs
Targeted style inheritance
Previous ideas and discussion:
- https://github.com/sveltejs/rfcs/pull/13
- https://github.com/sveltejs/rfcs/pull/22
- https://github.com/sveltejs/svelte/issues/901
- https://github.com/sveltejs/svelte/issues/2870
- https://github.com/sveltejs/svelte/issues/6422
- https://github.com/sveltejs/svelte/issues/6972
@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. https://github.com/sveltejs/rfcs/pull/41#issuecomment-1126434719 https://github.com/sveltejs/rfcs/pull/60#issuecomment-1204651747
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.
@ghughes Check out my RFCS: https://github.com/sveltejs/rfcs/pull/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.
@ghughes I just added changes that solve all the problems from your RFC. Please check it out, and rate it! - https://github.com/sveltejs/rfcs/pull/68
have you thought about components having a default slot which is consumed when using a
/**
/ 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>
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
