Check if the browser supports for an element attribute

We can detect if the current browser supports for given attribute, `pattern` for example, as following:
const isPatternSupported = 'pattern' in document.createElement('input');
If you would like to check for the value of attribute, it takes more steps. The sample code below determines whether the native date input is supported:
const isDateInputSupported = () => {
// Create new input element
const ele = document.createElement('input');
// Set the type attribute
ele.setAttribute('type', 'date');
const invalidValue = 'not-a-valid-date';
// Set an invalid value
ele.setAttribute('value', invalidValue);
return ele.value !== invalidValue;
If the browser supports the date input, invoking `setAttribute` with an invalid date won't have effect on the `value` attribute. As a result, `ele.value` will be an empty string.
Otherwise, the input is treated as normal text input and `ele.value` returns the original value.