Только некоторые элементы 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 сам по себе (на основе соответствующего контекста пользовательского ввода) и проверять себя как true или false. Таким образом, вызов form.checkValidity() должен возвращать true или false в зависимости от результата custom-form-component.
Как я нашел из документации (например, на MDN), только для некоторого элемента можно прикрепить теневой корень. Для элементов формы это невозможно. Однако только элементы формы поддерживают API проверки ограничений.
конкретный вопрос: как я могу реализовать собственный веб-компонент, который поддерживает API проверки ограничений?
