Scoped styling (@scope)

Scoped Styles (@scope)

CSS scoped styles (@scope) is a new rule that allows developers to limit styles to specific DOM subtree scopes. It addresses the issue of global style pollution in traditional CSS, providing more precise style control capabilities.

Basic Syntax

The basic syntax structure of the @scope rule is as follows:

@scope (scope root) to (scope limit) {
  /* style rules */
}

Where:

• scope root: Defines the root element of the scope
• scope limit (optional): Defines the boundary limit of the scope

Simple Example

<div class="component">
  <h1>Title</h1>
  <p>Paragraph content</p>
</div>

<style>
@scope (.component) {
  h1 {
    color: blue;
  }
  p {
    font-size: 1.2rem;
  }
}
</style>

In this example, the styles for h1 and p will only apply to the corresponding elements inside the .component element.

Scope Boundaries

You can explicitly specify scope boundary limits:

@scope (.card) to (.card-footer) {
  p {
    color: #333;
  }
}

This way, the styles for the p element will only apply inside .card but will not extend to .card-footer and its child elements.

Differences from Shadow DOM

Although both @scope and Shadow DOM provide style encapsulation, they have important differences:

1. Shadow DOM creates complete DOM isolation
2. @scope is merely an enhancement to CSS selectors and does not alter the DOM structure
3. Shadow DOM requires JavaScript
4. @scope is implemented purely in CSS and is more lightweight

Nested Scopes

@scope rules can be nested:

@scope (.page) {
  .header {
    background: #f0f0f0;
    
    @scope (.nav) {
      a {
        color: #0066cc;
      }
    }
  }
}

Specificity Calculation

@scope affects CSS selector specificity calculations. Selectors within a scope gain additional specificity weight:

@scope (#main) {
  .item { /* specificity: (1,1,0) */ }
}

/* Comparison */
.item { /* specificity: (0,1,0) */ }

Practical Use Cases

Component Style Isolation

@scope (.date-picker) {
  .day {
    width: 30px;
    height: 30px;
  }
  .selected {
    background: #007bff;
  }
}

Theme Switching

@scope ([data-theme="dark"]) {
  :scope {
    background: #222;
    color: #eee;
  }
  
  a {
    color: #4da6ff;
  }
}

Third-Party Content Isolation

@scope (.user-content) {
  /* Only affects user-generated content areas */
  img {
    max-width: 100%;
  }
  
  pre {
    background: #f8f8f8;
    padding: 1em;
  }
}

Combining with CSS Variables

@scope can be used with CSS variables to create more flexible styling systems:

@scope (.widget) {
  :scope {
    --widget-accent: #ff5722;
  }
  
  .title {
    color: var(--widget-accent);
  }
}

Browser Compatibility

Currently, @scope is still experimental, with major browser support as follows:

• Chrome 118+ (requires enabling experimental feature flags)
• Firefox: Not implemented
• Safari: Not implemented

You can use feature detection for progressive enhancement:

@supports (selector(@scope)) {
  @scope (.modern-component) {
    /* Modern browser styles */
  }
}

Performance Considerations

The performance impact of @scope mainly comes from:

1. Additional scope checks during style calculation
2. Complex nested scopes may increase style calculation time
3. Scope boundaries require additional DOM traversal

It is recommended to avoid excessive nesting and overly deep scopes.

Comparison with Traditional Methods

Alternative to BEM Naming

/* Traditional BEM */
.block__element--modifier {}

/* Using @scope */
@scope (.block) {
  .element.modifier {}
}

Alternative to CSS Modules

/* CSS Modules */
.localClass {}

/* Using @scope */
@scope (.component) {
  .localClass {}
}

Advanced Usage

Dynamic Scopes

Combine with JavaScript to create dynamic scopes:

document.querySelector('.container').setAttribute('data-scope-active', '');

@scope ([data-scope-active]) {
  /* Dynamic scope styles */
}

Scopes Within Media Queries

@media (min-width: 768px) {
  @scope (.responsive-layout) {
    .sidebar {
      width: 300px;
    }
  }
}

Scopes and Pseudo-Classes

@scope can be combined with pseudo-classes:

@scope (.list) {
  li:nth-child(odd) {
    background: #f9f9f9;
  }
}

Scope Inheritance

Scoped styles inherit some characteristics from parent scopes:

@scope (.parent) {
  --base-size: 16px;
  
  @scope (.child) {
    p {
      font-size: var(--base-size);
    }
  }
}

Debugging Tips

1. Use browser developer tools to inspect scope boundaries
2. Watch for specificity conflicts
3. Check if styles are accidentally overridden
4. Verify the accuracy of scope selectors

Future Directions

1. Finer-grained scope control
2. Communication mechanisms between scopes
3. Deeper integration with CSS nesting
4. Better developer tool support