Custom styles for components

[malgor]

TLDR;

Svelte components have everything that regular HTML tags have, except custom styles. This is a serious shortcoming that prevents people from sharing re-usable components and UI libraries. Custom styles would allow the user of a component to control the appearance of a component leaving the author to focus on the functionality.

What is missing

HTML tags have features that Svelte components replicate but there is clearly an imbalance in the design where CSS is concerned.

• HTML attributes — Svelte props
• DOM element methods — Svelte export
• DOM events — Svelte component events
• CSS styles — ???

When I use an HTML element I have complete control over its appearance using CSS. When I use a component that someone else has authored I have no control over its appearance using CSS.

I do have indirect control over a component's appearance using methods like CSS globals, CSS tokens and Svelte props but they are poor workarounds. Why? Because CSS globals are indiscriminate. And CSS tokens and props require the component's author to anticipate every possible use case, which is impossible, of course. So the author is required to endlessly provide updates as their users request support for new use cases. The user experience of this is bad too. Every component a user downloads will have its own unique set of tokens and props that the user must learn.

Example

I have created a dynamic search component, called Search.svelte. Internally it has a text input field and a ContextMenu component. The value of Search.svelte is the way it caches results so that as the user types more characters further round trips to the server are unnecessary. It would make a nice thing for me to contribute back to Svelte.

I use Search.svelte in a number of places in my application: in a page header, in the main section and in forms. In each location I have specific requirements for it's appearance. Variously, in my application the following CSS properties depend on the location.

• margin-left and margin-right to provide visual separation from other items in the header
• margin-top and margin-bottom
• width and focused width, with a transition, sometimes as a value in pixels, sometimes as a percentage of the form
• padding to match the surrounding elements

If other people were to use Search.svelte they would have just as many more special requirements for the appearance. But I have no interest in supporting Search.svelte to that degree. I won't go into my reasons why here, but I don't think I'm alone in this.

The solution

Boost the syntax of CSS to allow style to be defined from outside components. Allow a component name to be used in CSS rules just like tab names. For example, if Main.svelte uses component Search.svelte then the style of the elements of Search could be controlled from Main.svelte as follows.

Search.svelte

<script>
import ContextMenu from './ContextMenu.svelte';
...
</script>

<input type="text" />
<ContextMenu />

Main.svelte

<script>
import Search from './Search.svelte';
</script>

<Search />

<style>
Search > input {
  margin-left: 12px;
}

Search > ContextMenu > div {
  font-size: big;
}
</style>

[paoloricciuti]

Unfortunately is not that simple for a series of reasons:

1. unused css: svelte eliminates all unused css and would have no way to detect if Search > ContextMenu > div actually resolve to a valid selector.
2. not always a component is comprised of a single html element...how would Search > ContextMenu > div be translated to actual css that can be run in the browser? How do we make sure that the css is still scoped and cannot leak to other Search components on the page?
3. you would still need to know the internal structure of the component...this might be true for open soruce code that you see on github, vscode can bring you to the file to explore it but what if the user has not published the code? What if they compile the component to JS and publish that?

those are only the first problems that comes to mind but there will likely be a bit more.

That said there are discussion about allowing the parent component to style the child component in the future.

[malgor]

I wouldn't expect it to be any simpler than the other three features, so no argument there. However, we can say that the solution exists because CSS has what is needed to do this. Svelte will need to add an ID to one element or another and translate the CSS selector from Search > ContextMenu > div to something like #<svelte_uuid>.

But are we getting ahead of ourselves? Before we try and devise a solution, do we agree it should be done at all? I strongly believe it should but what do you think? I want the feature mainly because, the boost to re-usability of publicly released components would be enormous.

I also believe that the method Search > ContextMenu > div fits perfectly with Svelte's simple, easy to learn interface — use component names in CSS exactly like tag names and let the compiler sort out the complexity.