🔗ally.style.focusWithin

Polyfill the CSS Selectors Level 4 pseudo-class :focus-within

🔗Description

Since we cannot (easily) shim pseudo-classes, this function applies the class .ally-focus-within to all the elements that would match :focus-within. This method pierces the ShadowDOM and works with SVG.

This module allows the document to style :focus as follows:

body :focus {
  /* default styling in case JS broke */
  background: yellow;
}

body .ally-focus-within {
  /* styling parent elements of :focus */
  background: rgba(0, 0, 0, 0.3);
}

body .ally-focus-within:focus {
  /* styling :focus itself */
  background: red;
}

The :focus-within polyfill also works within the Shadow DOM, allowing the document styles to descend into the dark:

body >>> .ally-focus-within {
  /* styling parent elements of :focus */
  background: rgba(0, 0, 0, 0.3);
}
body >>> .ally-focus-within:focus {
  /* styling :focus itself */
  background: red;
}

/* older shadow-piercing-combinator notation */
body /deep/ .ally-focus-within {
  /* styling parent elements of :focus */
  background: rgba(0, 0, 0, 0.3);
}

🔗Usage

var handle = ally.style.focusWithin();

handle.disengage();

🔗Examples

🔗Notes

🔗Related resources

• Selectors Level 4: :focus-within Pseudo-class

🔗Contributing

• module source
• document source
• unit test