# svelte/no-nested-style-tag

disallow <style> elements nested inside other elements or blocks

# 📖 Rule Details

Svelte only scopes a single top-level <style> element per component. A <style> element nested inside another element or block is not scoped, so its rules may leak and cause unintended styles to be applied.

<script>
  /* eslint svelte/no-nested-style-tag: "error" */
</script>

<!-- ✓ GOOD -->
<div>
  <p>hello</p>
</div>

<style>
  p {
    color: red;
  }
</style>
<script>
  /* eslint svelte/no-nested-style-tag: "error" */
</script>

<!-- ✗ BAD -->
<div>
  
Nested `<style>` elements are not scoped and may lead to unintended styles being applied. (svelte/no-nested-style-tag)
<style>
    p {
      color: red;
    }
  </style>
</div>

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.18.0

# 🔍 Implementation