JSFiddle - React, Tailwind, and code Playground

HTML

<div id="host0" dir="rtl"><span> 789 101112 </span></div>
<div id="host1" dir="rtl"><span> 789 101112 </span></div>
<div id="host2" dir="rtl"><span> 789 101112 </span></div>

JavaScript

const shadowRoot0 = host0.attachShadow({mode: 'closed'});
shadowRoot0.innerHTML = '<div> 123 456 <span><slot></slot></span></div>';

const shadowRoot1 = host1.attachShadow({mode: 'closed'});
shadowRoot1.innerHTML = '<div> 123 456 <span dir="ltr"><slot></slot></span></div>';

const shadowRoot2 = host2.attachShadow({mode: 'closed'});
shadowRoot2.innerHTML = '<div> 123 456 <span><slot dir="ltr"></slot></span></div>';