Estoy desarrollando una extensión de Chrome usando React. Estoy usando vanilla.js para el script de fondo y contenido. Quiero implementar un elemento shadow-dom como lo hace Grammarly en el cuadro de texto de las páginas web. Consulte esta imagen: vea la esquina inferior derecha del gif

¿Alguien tiene idea de cómo Grammarly logra esta funcionalidad? cualquier segmento de código exacto de gramática? He intentado adjuntar elementos de sombra en el script de contenido, pero los resultados no son satisfactorios. Aquí está el código que probé:

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

Luego probé el paquete react-shadow . Pero no pude obtener el elemento en la página web. Entonces, ¿cómo mostrar este elemento dinámico exactamente en el mismo lugar de los cuadros de texto como lo hace gramaticalmente?