diff --git a/0000-allow-parent-to-impact-child-css.md b/0000-allow-parent-to-impact-child-css.md new file mode 100644 index 0000000..7601050 --- /dev/null +++ b/0000-allow-parent-to-impact-child-css.md @@ -0,0 +1,184 @@ +- Start Date: 2020/05/19 +- RFC PR: (leave this empty) +- Svelte Issue: (leave this empty) + +# Allow applying CSS to child components from parent + +## Summary + +I think https://github.com/sveltejs/rfcs/pull/13#issue-340110972 is a good addition, and I support it, but it doesn't address all issues + +I think Svelte is missing an important feature that other frameworks like Vue have. We need a way to easily apply CSS to a child component from the parent without having to use the verbose selector :global(childSelector) {} inside the CSS + +We should be able to apply CSS via classes to child components from the parent element. Many believe that this is a missing feature that should be in svelte. + +## Motivation + +> Why are we doing this? What use cases does it support? What is the expected +outcome? + +Being able to apply CSS to generic child components in Svelte would be a very convenient feature that will make designing websites easier for developers. This is clearly a feature that a large amount of developers would like, as there have been a number of issues raised regarding this: + +### Related issues: + +- https://github.com/sveltejs/svelte/issues/901 +- https://github.com/sveltejs/svelte/issues/4661 +- https://github.com/sveltejs/rfcs/pull/13 +- https://github.com/sveltejs/svelte/issues/4281 +- https://github.com/sveltejs/svelte/pull/2888 +- https://github.com/sveltejs/svelte/issues/4443 +- https://github.com/sveltejs/svelte/issues/2762 +- https://github.com/sveltejs/svelte/issues/1450 +- https://github.com/sveltejs/rfcs/blob/style-properties/text/0000-style-properties.md +- https://github.com/sveltejs/svelte/issues/4843 + +## Detailed design +imagine `` is a component that renders an `` element and has some scripts for routing (eg: `event.preventDefault()`) + +### Solution 1: +Add an attribute such as **descendants** or something to the ` +``` +### Solution 2: +Allow Child components to be given some sort of attribute that tells svelte to pass the scope to the child component, eg: +```svelte + +or + + +``` +### Solution 3: +Allow targeting of components within the parent CSS. eg: +```svelte + +``` + +### Alternatives considered +I have considered taking the `selector :global(childSelector){}` but it is far too verbose, especially if you have something like a `` component for JavaScript routing, and it might be found in your nav, sidebar, content, headings, footer (with each instance styled differently) + +Not to mention that this only works if you wrap the component in something (selector) otherwise it would apply the global everywhere, eg: +```svelte +
+ About Us +
+ +``` + +I would like to do something like this: +```svelte +About Us + +``` + +**I am willing to contribute adding these features if supported** + +## How we teach this + +> What names and terminology work best for these concepts and why? How is this +idea best presented? As a continuation of existing Svelte patterns, or as a +wholly new one? + +> Would the acceptance of this proposal mean the Svelte guides must be +re-organized or altered? Does it change how Svelte is taught to new users +at any level? + +> How should this feature be introduced and taught to existing Svelte +users? + +## Drawbacks + +### Solution 1: +would mean that we may need to add support for multiple style tags in Svelte. I don't think that this is a drawback, but rather a bonus that some other people have been asking for. +We could also have a style attribute for global (eg: `