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.