-
Notifications
You must be signed in to change notification settings - Fork 82
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Targeted style inheritance #66
base: master
Are you sure you want to change the base?
Conversation
@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. 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. Two people liked it. We'll see what happens next. |
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> |
Maybe I'm missing something, but isn't the solution to this and related issues already speced? |
Rendered