пользовательский элемент формы веб-компонента для проверки ограничений

Question

Только некоторые HTMLElements поддерживают API проверки ограничений (например, HTMLButtonElement).Я хочу создать пользовательский веб-компонент, который также поддерживает API проверки ограничения.

Ниже приведен пример для желаемого результата:

<form>
  <input name="title" required>
  <custom-form-component></custom-form-component>
</form>
<script>
  const form = document.querySelector('form');
  form.checkValidity();
</script>

custom-form-component может вызватьsetCustomValidity на себя (на основе соответствующего пользовательского контекста ввода) и подтвердите, что оно истинно или ложно.Таким образом, вызов на form.checkValidity() должен возвращать true или false в отношении результата custom-form-component.

Как я обнаружил из документации (например, в MDN) только для некоторого элемента, который можно прикрепитькорень тени.Это невозможно для элементов формы.Однако только элементы формы поддерживают API проверки ограничений.

Конкретный вопрос: как реализовать пользовательский веб-компонент, который поддерживает API проверки ограничений?

Answer 1

Это новое введение в веб-компоненты.По состоянию на 25 сентября 2019 года его поддерживает только Chrome 76.

Вот статья, предоставленная разработчиками Google Web:

https://web.dev/more-capable-form-controls/

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

Это включает:

1. Проверка формы
2. :disabled, :invalid и :validПсевдоклассы CSS
3. Событие formdata
4. И статическое свойство formAssociated, которое указывает браузеру обрабатывать ваш элемент как элемент управления формы.

Плюс несколькодругие вещи, которые позволяют вашему контролю исправлять ошибки в <form>