How can I achieve a consistent focus outline color with shadow-dom web components?

Question

I'm using web components, mostly written with lit-element and lit-html, and they use the Shadow DOM.

Some components have buttons and other interactive parts which have the default focus outline.

When I build an app, i like to set a page-wide rule to change the focus outline to a color that clearly stands out from the page's background colors.

*:focus {
  outline: 2px solid lime;
}

i was expecting this to flow over shadow boundaries into the web components, similar to color and font-size, but it does not

considering that outline does not cross the shadow boundaries — what options do i have to achieve my consistent focus outline color?

Answer 1

Standardize CSS variable --focus-outline in your app

application-level:

* {
  --focus-outline: 2px solid lime;
}

*:focus {
  outline: var(--focus-outline);
}

example component usage:

*:focus {
  outline: var(--focus-outline, 2px solid #0af);
}

every component must be refactored to accept this variable

each component will have to define its own fallback like 2px solid #0af (unfortunately there is not yet any standardized default-focus-outline css value)