JSFiddle - React, Tailwind, and code Playground

HTML

<div id="greeter"></div>

JavaScript

var greeter = document.querySelector('#greeter'); // Der spätere Shadow-Host
var input = document.createElement('input'); // Das Name-Eingabefeld
var button = document.createElement('button'); // Der Sag-Hallo-Button

button.innerHTML = 'Sag Hallo!';

button.onclick = function () {
   var name = input.value;
   alert('Hello, ' + name + '!');
};

var shadowRoot = greeter.createShadowRoot();

shadowRoot.appendChild( input );
shadowRoot.appendChild( button );