JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div id=box>
  Type your name:
  <span slot="Name" contenteditable>Mickey</span>
  <br><button onclick="add()">Add Shadow</button>
</div>

CSS

#box [contenteditable] {
  outline: 1px solid lightgray ;
  display: inline-block ;
  min-width: 50px ;
}

JavaScript

function add() {
  box.attachShadow( { mode: 'open' } )
     .innerHTML =`<style>
        ::slotted( span ) { 
          color: blue ; 
          font-style: italic ; 
          outline: none !important ; 
          min-width: 0 !important; 
        }
      </style>
      Hello <slot name="Name"></slot>!`
      }