Применение: focus CSS к полю ввода в shadowDOM и: focus CSS к теневому хосту - PullRequest
Новая
       34

Применение: focus CSS к полю ввода в shadowDOM и: focus CSS к теневому хосту

1 голос
/ 16 марта 2020

В настоящее время я работаю над пользовательским элементом, который представляет собой слегка расширенную версию элемента ввода, в которой все его строительные блоки (включая элемент ввода) размещены в теневом DOM.

Когда внутренний элемент ввода имеет фокус, элемент хоста должен быть стилизован с помощью цветного контура и рамки-тени, как показано ниже:

enter image description here

Поэтому фокус и размытие Обработчики событий ввода переключают атрибут «сосредоточенный» на элементе хоста с инкапсулированными стилями, выглядящими так: 

:host([focussed]) {
    transition: outline 0.3s ease-in-out;
    outline-color: var(--focus-color, var(--default-focus-color)) !important;
    box-shadow: 0px 0px 3px var(--focus-color, var(--default-focus-color)) !important;
}

Что мне не нравится в этом подходе:

Предоставление настраиваемого атрибута на хосте, который необходимо наблюдать, для обеспечения правильности визуально представленного состояния (например, звонки потребителя setAttribute('focussed', ''))

Альтернативы, которые я рассмотрел:

Конечно, моей первой мыслью было инкапсулировать атрибут в теневой DOM (или даже переключить класс) в элемент контейнера, заполняя пространство элемента host, но проблема в том, что переполненное содержимое, такое как контур и тень блока, кажется, принудительно скрыто элементом host - что кажется логичным.

Я мог бы диктовать фиксированный отступ на хосте элемент, обеспечивающий видимость контура и тени, но для этого потребуется рассмотреть другое поведение рендеринга в браузере box-shadow, и потребитель будет чувствовать себя не интуитивно понятным для пользовательских стилей.

Я ищу подход наилучшей практики здесь, и я был бы очень признателен за ваши образованные мысли об этом.

1 Ответ

3 голосов
/ 16 марта 2020 
this.attachShadow({
      mode: 'open',
      delegatesFocus: true
    })

работает в Chrome, Edge, Opera, но не в других (пока)

Стилизует сам ввод (в shadowDOM) с помощью: 

:focus {
  transition: outline 1s ease-in-out;
  outline: 2px solid var(--focus-color,blue);
  box-shadow: 10px 0px 10px var(--focus-shadow-color,red);
}

И стилизуют элемент host с (global) CSS: 

  :focus {
    outline: 5px solid green;
  }

Полное объяснение и игровая площадка JSFiddle
сначала используйте Chrome / Edge / Opera , а затем увидеть отсутствие поведения в других :
https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

Имеет несколько указателей для обхода щелчка / фокуса / размытия.

Для FireFox, Поддержка Safari Я бы добавил что-то не слишком необычное, что можно легко удалить.

На данный момент мне неясно, каковы временные рамки в Mozilla и Apple,
может быть Суперзвук знает

...