I'm developing a chrome extension using React. I am using vanilla.js for background and content script. I want to implement a shadow-dom element like Grammarly do in textbox of web pages. Refer this pic: see the bottom right corner of the gif

Anyone has any idea how Grammarly achieve this functionality? any exact code segment from grammarly? I've tried attaching shadow elements into the content script, but the results aren''t satisfactory. Here is the code I tried:

var host = document.activeElement;
var root = host.attachShadow({mode: 'open'});
var div = document.createElement('div');
div.className = 'div';
div.innerHTML = '<style>.div{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);}</style>this is shadow dom';
root.appendChild(div);

Then I tried the react-shadow package. But I couldn't get the element into the web page. So how to display this dynamic element in the exact same place of the textboxes as grammarly do?