What Is the Current State of the "Scoped" Attribute for the Style Element in HTML5

What is the current state of the scoped attribute for the style element in HTML5?

UPDATE. The scoped attribute no longer works in any browser and is now non-standard and deprecated.

Your interpretation of the specification appears correct. The MDN page on the style tag includes a description of the scoped attribute.

scoped If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.

The `scoped` attribute:

Here is a working example of this that will work in Firefox 21 through 54 only.

Example:

<div>
  <p>Out of scope.</p>
  <div>
    <style scoped>
      p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Out of scope.</p>
</div>

What practice to use for HTML5 scoped attribute

The validator will bitch at you if you have a style elem outside of the head. Scoping isnt supported and you should NOT do it for validation reasons, it has very explicit meanings in HTML5 and WebKit is soon landing support for it.

Browsers, on the other hand, don't give a shit about where your style elements are. So feel free to put them where you have to. (Assuming you have a good reason to put it outside of the head... which I'm curious about..)

Anyway, yet another example of how the validator does not reflect the reality of browsers. :)

Why Does My CSS Code in style scoped Apply Globally?

I have found this reply online:

You are not doing anything wrong. As of this moment, scoped CSS is still an experimental feature which is not supported by any current browser.

However, if you want to play around with it in Chrome you can do the following thing:

Go to chrome://flags/ in your Chrome browser;
Find "Enable experimental WebKit features." and click enable
Restart your browser.
Try your code. It should work.

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

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>

HTML5 scoped styles on parent (scoping) element

The HTML 5.0 specification doesn't define any scoped attribute. But the HTML 5.1 specification says:

The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.

In your case, the root of the subtree is the <section> element containing the <style> element. The root is part of the tree and the style color:red; is applied to it.

So, on this example, the the Mozilla implementation is conform with the standard.

Element style not allowed as child of element body in this context ( style scoped not validating)

The W3C Markup Validator, when acting as an HTML5 checker, handles this issue according to various drafts such as HTML 5.1 Nightly, which right now says that the style element may appear only inside the head element, except when the scoped attribute is present, in which case it may appear “where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent”. In your actual example, the element appears after a script element (which is counted as flow content). Changing the order of the elements thus changes the syntax to valid, under the given definition.

Alternatively, you can just wrap the style element in a div element:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script type="text/javascript"></script>
<div>
  <style scoped></style>
</div>
</body>
</html>

The scoped attribute is not valid at all according to the W3C Recommendation HTML5. It was present in HTML5 drafts, but it was dropped from the Recommendation due to lack of implementations, but it is still in the “standardization track” and may make its way to HTML 5.1.

Note that existing browsers generally ignore the scoped attribute and allow a style element almost anywhere and apply its content to the entire HTML document (even parts that precede the style element).

Is possible to styling parent from child with scoped?

No.

html5's <style scoped> had a brief and useful life but is no more. It was obsoleted. Some discussion at What is the current state of the "scoped" attribute for the style element in HTML5?
Vue.js's <style scoped> applies to the current component.

Scoped CSS not being applied within the component

For some reason, scoped styles don't get applied during hot reload when they are first added to the component. Full page reload fixes the issue, from there the styles, since they have been detected, get updated with consecutive hot reloads.

style tag within body and W3 Standards

From the front page of the document you linked to:

This document has been discontinued and is only made available for historical purposes. For an up to date reference on HTML elements (and more) please consult Web Platform Docs.

Some draft versions of HTML 5 allowed style elements in the body under certain conditions.

There were various problems with the design of that functionality and it did not make it into the final version of HTML 5.

What Is the Current State of the "Scoped" Attribute for the Style Element in HTML5