与模板标签或自定义元素一起使用时，iOS 14 上的 Safari 会中断日期/时间输入

Question

在 iOS 14 上使用带有 Safari 的 webComponent 时（iOS 13 工作正常），日期输入呈现为日期输入，但行为呈现为文本输入。所有其他浏览器和设备都按预期工作。

代码是否存在问题，或者是否有适用于 iOS 14 的更好/不同的方法？将内容作为 HTML 字符串 (innerHTML) 读取时，输入按预期工作。

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：带有 cloneNode 的模板标签

JSFiddle：带有 customElements/webComponent 的模板标签

进步

webkit.org上有一个错误报告，状态为：已解决

固定的 iOS 版本：未知