Using IDs and Classes on Custom Components

[Nukiloco]

Describe the problem

Currently I'm porting over my website application from Lit to Svelte. When assigning a custom component an id/class and using css to position it, i noticed that the style didn't get applied at all. There is many parts in my website where I move child components into certain positions and spots. Obviously a way to bypass it is to give my custom component custom css variables and assign it to the component, though this feels very redundant to do, especially when your website is composed of a lot of components.

As far as I know of, many if not almost all web frameworks allow you to assign custom ids and classes to custom web components.

If there is some alternative way to making this easier, then I haven't found it in the documents, examples, or even the project examples yet.

Describe the proposed solution

Very simple solution is to allow ids and classes to be assigned to custom components.

<CustomComponent id="custom_component"></CustomComponent>

<style>
#custom_component {
  position: relative;
  width: 300px;
  height: 400px;
  top: 500px;
  left: 300px;
  color: blue;
}
</style>

Alternatives considered

I'm not sure of current alternative features currently that I can use.

Importance

would make my life easier

[Conduitry]

There's no guarantee there's a single root element to apply these styles to. If you want to apply those styles to the component, either make the component accept them as a prop and deal with it appropriately within the component, or wrap the component in a div with the appropriate styles.

This has come up several times before - the issue I've found just now is #4671, although that's not entirely the same request.

[Nukiloco]

Since this is a limitation with svelte, I don't feel like the recommended method to apply styles to a certain component outside its style is currently the best solution, its still a good solution though. If this is an issue with selecting certain elements I do have a few questions.

First of all, when selecting a custom component with an id or a class, if the issue is about targeting that certain component, how come the compiler can't guarantee it would select the first root element in the component? While typing this I think I get what you mean now since you can have multiple tags in the root of your svelte file. I think there should be a new svelte tag that allows you to target a certain element that you want to stylize at default.

Child component:

<script>

</script>

<!-- This will be the element that will be targeted by the parent component -->
<svelte:style_target>
	<div id="element1">

	</div>
</svelte:style_target>

<div id="element2">

</div>

<style>
	#element1 {
		position: absolute;
		background-color: blue;
		width: 50px;
		height: 50px;
	}

	#element2 {
		position: absolute;
		background-color: orange;
		width: 50px;
		height: 50px;
		left: 80px;
	}
</style>

Parent component:

<ChildComponent id="child_component"></ChildComponent>

<style>
	/* This will stylize the #element1 element since the <svelte:style_target> tag wrapped around it */
	#child_component {
		left: 200px;
	}
</style>

<svelte:style_target> is just something i came up with though there is probably a better name for it?

Second it was sort of hard to find that out that svelte can't actually target child components and there isn't any examples on the website except the part talking about using :global which doesn't indicate at first that's how people are supposed to handle child components. If this issue is here to stay, the recommended way to style child components should be put in the examples and somewhere in the documentation that is about stylizing child components.

[rkyoku]

I know this is an old thread, but it is clearly a limitation imposed by Svelte.

Svelte could totally apply the id to the first root element of the component, especially when specifically using ...$$props on said element...

Also, when it comes to classes, this argument of "a single root element" has obviously even less meaning, if any at all. But, again, it's up to the developer to properly pass the id/class back to any element they wish in their component, so that it can be styled by the parent accordingly.

To me, this is a severe limitation on the ease of use of components...