Is the `scoped` Attribute for the `style` Element Still Relevant in HTML5?

What is the Current State of the scoped Attribute for the style Element in HTML5?

Background

HTML5 initially proposed the scoped attribute for the style element, aiming to limit the application of styles to the style element's parent element and its descendants. However, due to limited browser implementation, the feature was eventually dropped.

Current Status (2023)

Currently, the style element without the scoped attribute can appear legally anywhere in the document. However, the specification warns against potential unintended restyling of other document elements.

Solution for Scoped Styles

Despite the lack of scoped attribute support, scoped styles can still be achieved by utilizing explicit selectors, such as ID selectors. Here's an example:

<code class="html"><div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div></code>

This approach ensures that the styles apply only within the designated div element. It requires avoiding ID clashes, but that's already a best practice.

Future Outlook

As of now, there are no indications of the scoped attribute being reintroduced in HTML. The explicit selector approach remains the recommended technique for achieving scoped styles.

The above is the detailed content of Is the `scoped` Attribute for the `style` Element Still Relevant in HTML5?. For more information, please follow other related articles on the PHP Chinese website!