JSFiddle - React, Tailwind, and code Playground

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="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

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)
            );
        }
    }
);

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


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