When using a webComponent with Safari on iOS 14 (iOS 13 is working fine) the date inputs are rendered as date inputs but behaviors as a text input. All other browsers and devices work as expected.

Is there a an issue with the code or is there a better/different way this should be done that is working for iOS 14? When reading the contents as HTML string (innerHTML) the inputs work as expected.

HTML:

<h1>Without template tag</h1>
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="number" />
<input type="text" />


<h1>With template tag</h1>
<div id="type-tester"></div>

<template id="test1">
<div>
    <input type="date" />
    <input type="time" />
    <input type="datetime-local" />
    <input type="number" />
    <input type="text" />
</div>
</template>
<template id="test2">
<div>
    <input type="date" />
    <input type="time" />
    <input type="datetime-local" />
    <input type="number" />
    <input type="text" />
</div>
</template>

<my-test></my-test>

JavaScript:

var template = document.getElementById('test1');
var clone = template.content.cloneNode(true);

// Workaround
//var div = document.createElement('div');
//div.innerHTML = template.innerHTML;
//clone = div.firstElementChild;

var inputDate = clone.querySelector('input[type=date]');
var inputTime = clone.querySelector('input[type=time]');
var inputDatetime = clone.querySelector('input[type=datetime-local]');
var inputNumber = clone.querySelector('input[type=number]');
var inputText = clone.querySelector('input[type=text]');

document.body.appendChild(clone);

var tester = document.getElementById('type-tester');
tester.textContent = 'Types; date=' + inputDate.type + ', time=' + inputTime.type + ', datetime=' + inputDatetime.type + ', number=' + inputNumber.type + ', text=' + inputText.type + ' (' + navigator.userAgent + ')';

customElements.define('my-test',
    class extends HTMLElement {
        constructor() {
            super();

            var template = document.getElementById('test2');
            var templateContent = template.content;

            this.attachShadow({ mode: 'open' }).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
);

JSFiddle: template tag with cloneNode

JSFiddle: template tag with customElements/webComponent

Progress

There is a bugreport on webkit.org with the status: RESOLVED FIXED

Fixed iOS version: UNKNOWN