What is the reason behind Svelte not scoping the tag under a class, but instead using individual tag.class to style a component?

Question

What is the reason behind Svelte not scoping the tag under a class, but instead using individual tag.class to style a component?

It is common practice to scope CSS styles for components like this:

.my-component-01 h1 { ... }
.my-component-01 h2 { ... }

However, Svelte takes a different approach by applying the styles directly to the tags:

h1.svelte-hlsza1{color:orange}
h2.svelte-hlsza1{background:yellow}

Would it be better to actually wrap these styles under a specific class (the top method)? This way, in the HTML markup, you would only need to include the class once:

<div class="svelte-hlsza1">
  <h1> ...
  <h2> ...

This approach eliminates the need to repeat the class name every time and maintains the same level of specificity: 1 class and 1 tag name.

css svelte

Answer 1

Answer №1

One of the unique features of Svelte is that it does not necessitate a single top-level element.

<!-- This is perfectly fine with Svelte -->
<h1>...</h1>
<h2>...</h2>

In fact, it doesn't even require elements at all.

<script>...</script>
<!-- Even without elements, Svelte still works smoothly -->

Without a root element, the strategy of using a single wrapping class is not applicable.

Moreover, without a root element, the styling will apply to both the current component and its children. Consider this example:

<!-- Scoped.svelte -->
<style>
   span { color: red }
</style>

<div>
  <span>I should be red</span>
</div>

<slot />

<!-- App.svelte -->
<script>
  import Scoped from './Scoped.svelte'
</script>

<Scoped>
  <span>I should not be red</span>
</Scoped>

The <span> in App.svelte is considered a child of the Scoped component within the DOM structure.

Note: If you aim to scope styles only to the current component and its children, use the :global pseudo selector:

<style>
  /* It is necessary to have a wrapping element for this approach */
  div :global(span) { color: blue }
</style>

The style defined with the div selector will exclusively affect the children of the component (within the DOM hierarchy), not elements outside of it.

Answer 2

One of the unique features of Svelte is that it does not necessitate a single top-level element.

<!-- This is perfectly fine with Svelte -->
<h1>...</h1>
<h2>...</h2>

In fact, it doesn't even require elements at all.

<script>...</script>
<!-- Even without elements, Svelte still works smoothly -->

Without a root element, the strategy of using a single wrapping class is not applicable.

Moreover, without a root element, the styling will apply to both the current component and its children. Consider this example:

<!-- Scoped.svelte -->
<style>
   span { color: red }
</style>

<div>
  <span>I should be red</span>
</div>

<slot />

<!-- App.svelte -->
<script>
  import Scoped from './Scoped.svelte'
</script>

<Scoped>
  <span>I should not be red</span>
</Scoped>

The <span> in App.svelte is considered a child of the Scoped component within the DOM structure.

Note: If you aim to scope styles only to the current component and its children, use the :global pseudo selector:

<style>
  /* It is necessary to have a wrapping element for this approach */
  div :global(span) { color: blue }
</style>

The style defined with the div selector will exclusively affect the children of the component (within the DOM hierarchy), not elements outside of it.

Answer 3

Answer №2

It is true that the level of specificity remains the same, but there is a crucial difference in the way Svelte handles components compared to traditional HTML elements.

.my-component-01 h1 { ... }

In Svelte, there is no default parent HTML element wrapping components. This means that components do not have a predefined parent element like they would in standard HTML.

For example, if you look at this REPL, you'll see that even though one of the h1 tags comes from an imported component, both h1 tags end up next to each other in the compiled markup:

<body>
  <h1 class="svelte-1k0q8ta">This is green</h1>
  <h1 class="svelte-1wsvnfu">This is red</h1>
</body>

If Svelte were to follow the natural order and wrap components with parent elements, the markup would look something like this:

<body>
  <someelement class="my-component-01">
    <h1>This is green</h1>
  </someelement>
  <someelement class="my-component-02">
    <h1>This is red</h1>
  </someelement>
</body>

This approach could lead to unexpected behavior when using CSS properties like flexbox or grid that rely on specific parent-child relationships. While having repeated classnames for elements may not be ideal for frequent browser inspectors, it is necessary to ensure that CSS functions as intended for the majority of users.

Answer 4

It is true that the level of specificity remains the same, but there is a crucial difference in the way Svelte handles components compared to traditional HTML elements.

.my-component-01 h1 { ... }

In Svelte, there is no default parent HTML element wrapping components. This means that components do not have a predefined parent element like they would in standard HTML.

For example, if you look at this REPL, you'll see that even though one of the h1 tags comes from an imported component, both h1 tags end up next to each other in the compiled markup:

<body>
  <h1 class="svelte-1k0q8ta">This is green</h1>
  <h1 class="svelte-1wsvnfu">This is red</h1>
</body>

If Svelte were to follow the natural order and wrap components with parent elements, the markup would look something like this:

<body>
  <someelement class="my-component-01">
    <h1>This is green</h1>
  </someelement>
  <someelement class="my-component-02">
    <h1>This is red</h1>
  </someelement>
</body>

This approach could lead to unexpected behavior when using CSS properties like flexbox or grid that rely on specific parent-child relationships. While having repeated classnames for elements may not be ideal for frequent browser inspectors, it is necessary to ensure that CSS functions as intended for the majority of users.

What is the reason behind Svelte not scoping the tag under a class, but instead using individual tag.class to style a component?

Answer №1

Answer №2

Similar questions

Tips for expanding an input field to span across two td elements

What could be causing my cross fade to not repeat as intended?

Border for status input like on Facebook

The functionality of my website is not optimized for viewing on iPhones

Combining classes within LessCSS for nested functions

resizing videos in wordpress

Designing a captivating loading screen in Sencha Touch optimized for various mobile device resolutions

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

Using radio buttons to toggle the visibility of a div element within a WordPress website

Alignment of menu blocks

Displaying postcode on a category page: A step-by-step guide

The fadeOut() function is not functioning properly as the div keeps reappearing even after attempting to

Is it possible to showcase dates within input text boxes prior to POSTing the form?

Aligning a Material UI button to the far right of a row

Tips for aligning an icon in the middle of the Bootstrap 3 grid vertically

Scroll through the div to quickly find the relevant content

The appearance of the drop-down menu in IE is not the same as in other

MVC Template with a Defective BootStrap

Tips for expanding the width of an image when employing position:relative

What is the best way to create a "tile-based board" for this game?