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

What is the best way to add flair to the HTML <title> tag?

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Replicate the ctrl+/- function through coding

The ease of use and availability of radio buttons

Issues with 'floating' unordered lists

Why does the last-of-type selector work, but the first-of-type doesn't seem to?

The functionality of jQuery .Show() may be affected when a negative margin is present in the

Margins and borders with a negative impact

Require assistance in getting a slider operational

Two-column dropdowns without the use of tables

explore the route with the help of jquery scrolling feature

Arrange divs in a grid layout with evenly distributed dynamic spacing

Transforming CSS styles into Material UI's makeStyles

Setting the font-size in HTML/CSS to dynamically adjust and fill the entire width and height of its

Enhancing the bottom border of an unordered list when incorporating styled bullets

I am having trouble debugging the Twitter Bootstrap v4-alpha grid. The col-sm-offset-* class doesn't seem to be

It appears that the React MUI Grid is causing the page or its container to experience overflow issues

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

Method for eliminating double quotes from a string bound in Angular

Tips for incorporating unique images into each individual flex box