[focus-visible-plugin] .js-focus-visible breaks output when leveraged with shadow DOM

[Westbrook]

What would you want to propose?

I'd like API to customize the application of .js-focus-visible in the focus-visible-plugin.

The recent upgrade of the focus-vidible-plugin to include .js-focus-visible creates selectors that do not exist when leveraged with CSS targeted for application to shadow DOM. Generally the shadow DOM implementation of the polyfill cannot rely on parent elements having .js-focus-visible and doesn't seem to apply .js-focus-visible to the focused element.

Suggested solution

I'm not sure if a legacy flag is correct, or if a scopedSelector flag would be better, but being able to do the following in some form:

require('postcss-focus-visible')({
    scopePolyfilledSelectors: false,
})

Additional context

Input:

:host(:focus-visible) {}

Output:

.js-focus-visible :host(.focus-visible),
:host(.focus-visible).js-focus-visible {}

:host(:focus-visible) {}

Expected:

:host(.focus-visible) {}

:host(:focus-visible) {}

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

@Westbrook thank you for bringing this up.

The reasons for the .js-focus-visible class is that certain transforms would otherwise be incorrect.

:not(:focus-visible) {
  color: red;
}

/* would become */
:not(.focus-visible) {
  color: red;
}
:not(:focus-visible) {
  color: red;
}

In a browser without native support this would be ok as :not(:focus-visible) would be invalid.

In a browser with native support the JS polyfill would not run and .focus-visible would never be set.

To prevent this scenario we need to add a marker that the polyfill did actually run.

Is there a good parallel for shadow DOM?

[romainmenke]

@Westbrook We have just released new versions with the option to disable this behaviour : https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8/plugins/postcss-focus-visible#disablepolyfillreadyclass

[romainmenke]

Closing as this was fixed.

@Westbrook if this is still causing issues for you please let us know, then we will reopen this.