How to detect support for style's "scoped" attribute

css, javascript

Solution

I don't think there is a recommended test, but I just wrote one, and I'll recommend it

var is_scoped = (function(s) {
    s.setAttribute('scoped', 'true');
    return !!s.scoped;
})(document.createElement('style'));

to be used as

if ( is_scoped ) {
    // scoped styles are supported
}

FIDDLE

currently scoped styles is only supported in the latest Firefox.

Written a little more verbose, it's easier to see what's going on

var style = document.createElement('style');
style.setAttribute('scoped', 'true');
var is_scoped = style.scoped === true;

We create a style tag and set the scoped attribute to true. In browsers that supports scope, that also sets the underlying scope property, so `style.scope` would be `true` in supporting browsers, it non-supporting browsers it would be `undefined`.

This is the usual way of checking for support for a multitude of features, and it works just as well with `scoped`.

Problem

Is there a recommend test for determining whether the user's browser supports the "scoped" attribute on "style" elements?

Original source