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

Question

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

Answer 1

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.

Answer 2

You can try this..

var is_scoped = (function(s) {
    return 'scoped' in s;
})(document.createElement('style'));