Стиль элемента не разрешен как дочерний элемент тела в этом контексте (<стиль> не проверяется)

<!DOCTYPE html>
...
<style scoped>
/* css */
</style>

Валидатор w3.org дает мне эту ошибку:

Line 883, Column 17: Element style not allowed as child of element body in this context.
(Suppressing further errors from this subtree.)
        <style scoped>...
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: 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.
Content model for element body:
Flow content.

Насколько я понимаю, свойство 'scoped' делает так, чтобы тег стиля находился за пределами заголовка документа. Итак, почему валидатор недоволен этим?

(Я использую Wordpress, и этот код создается плагином, поэтому я не могу просто поместить его в голову.)

EDIT: Это не подтверждает -

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

Но это происходит, если тег script идет после тега стиля. В чем причина этого?

Ответ 1

Валидатор W3C Markup Validator, действуя как средство проверки HTML5, обрабатывает эту проблему в соответствии с различными черновиками, такими как HTML 5.1 Nightly, который прямо сейчас говорит, что style может появляться только внутри элемента head, за исключением случаев, когда присутствует атрибут scoped, и в этом случае он может появиться "там, где ожидается поток", но перед любым другим потоковым содержимым, отличным от межэлементных пробелов и элементов стиля, а не как дочерний элемент элемента, модель контента которого прозрачна ". В вашем фактическом примере элемент появляется после элемента script (который считается потоком содержимого). Таким образом, изменение порядка элементов изменяет синтаксис на действительный, в соответствии с данным определением.

В качестве альтернативы вы можете просто обернуть элемент style элементом div:

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

Атрибут scoped вообще недействителен в соответствии с Рекомендацией W3C HTML5. Он присутствовал в черновиках HTML5, но он был исключен из Рекомендации из-за отсутствия реализаций, но он все еще находится в "стандартизованной дорожке" и может перейти к HTML 5.1.

Обратите внимание, что существующие браузеры обычно игнорируют атрибут scoped и позволяют использовать элемент style практически везде и применять его содержимое ко всему документу HTML (даже части, предшествующие элементу style).