Как мне добиться согласованного фокуса с помощью веб-компонентов shadow-dom? - PullRequest
Новая
       23

Как мне добиться согласованного фокуса с помощью веб-компонентов shadow-dom?

3 голосов
/ 18 апреля 2019

Я использую веб-компоненты, в основном написанные с lit-element и lit-html, и они используют Shadow DOM.

Некоторые компоненты имеют кнопки и другие интерактивные части, которые имеют контур фокуса по умолчанию.

Когда я создаю приложение, мне нравится устанавливать правило для всей страницы, чтобы изменить контур фокуса на цвет, который явно выделяется из цветов фона страницы. 

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

Я ожидалэто перетекание через теневые границы в веб-компоненты, аналогично color и font-size, но это не

, учитывая, что outline не пересекает теневые границы - какие варианты я должен достичьмой постоянный фокусный цвет контура?

1 Ответ

0 голосов
/ 26 апреля 2019

Стандартизировать переменную CSS --focus-outline в вашем приложении

уровень приложения: 

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

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

пример использования компонента: 

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

каждый компонент должен быть реорганизован впринять эту переменную

каждый компонент должен будет определить свой собственный запасной вариант, например 2px solid #0af (к сожалению, стандартизированного значения default-focus-outline css пока нет)

...