Scoped CSS doesn't work and the styles get leaked out

Question

I have a CSS file called "stylesheet.css"

p {
    margin: 0%;
    font-family: cursive;
    font-size: 1cm;
}

h1 {
   font-family: sans-serif;
}

And I have an html file in the same folder

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
    </head>
    <body>
        <p>Test</p>
        <h1>Test</h1>

        <div>
            <style scoped>
                @import "stylesheet.css";
            </style>
            <p>Test (Supposed to be bigger and different font)</p>
            <h1>Test (Should have a different font)</h1>
        </div>
    </body>
</html>

But for some reason, the style rules that I had imported in a scoped style tag in a div leaks out to the body and styles the p tag above:

scoped is not a standard css keyword. In your sample it look like the vue keyword scoped that apply style only on current component — jeremy-denis, Apr 14 '22 at 09:10

score 4 · Accepted Answer · answered Apr 14 '22 at 09:19

Browsers do not support scoped which has been deprecated.

Even if they did support it, your CSS is targetting the body element and there isn't a body element inside the div that you are scoping the CSS to (and can't be, since a body element isn't allowed there).

Write your CSS to target the elements you actually have.

#scopeTarget {
  margin: 0%;
  font-family: cursive;
  font-size: 1cm;
}

<p>Test</p>

<div id="scopeTarget">
  <p>Test (Supposed to be bigger and different font)</p>
</div>

@MaikLowrey — You *can*, but [`` is preferered](https://stackoverflow.com/a/7199377/19068) and ` — Quentin, Apr 14 '22 at 09:27

Scoped CSS doesn't work and the styles get leaked out

1 Answers1