0
206
Vistas¿Cómo puedo interactuar con el contenido Shadow DOM insertado en el navegador en un campo de entrada?
Actualmente estoy tratando de configurar una función que hará clic en el pequeño reloj dentro de <input type=time> pero no puedo encontrar el HTML interno de la etiqueta para encontrar el reloj.
Esto es lo que quiero hacer:
html
<input id='timeInput' type='time'/>JS
document.getElementById("timeInput").children('clockIcon').click() Pero cuando ejecuto un document.getElementById('timeInput').innerHTML me sale nulo.
Creo que esto tiene algo que ver con Shadow DOM, pero no he podido encontrar la información sobre la entrada de Shadow DOM.
Anteriormente pude verificar el HTML oculto del navegador, pero no puedo encontrar ese recurso anterior. ¿Algunas ideas?
Para especificar, mi aplicación solo se muestra en los navegadores Chrome y Opera, ya que es una extensión de Chrome.
3 Respuestas
Responde la pregunta0
No hay forma de interactuar con el DOM de la sombra. Todo el propósito de un árbol de sombra es aislar la funcionalidad, el comportamiento y los estilos del mundo exterior, incluso si el modo está "abierto". Si el autor de un componente en particular quiere que usted pueda controlar el comportamiento o los estilos, le proporcionará una API para hacerlo. Si el autor no proporciona una API para ello, no querrán que juegues con él.
Cuando se trata de usar campos de formulario, mi regla general es seguir siempre una de estas reglas:
- Use los campos del formulario del navegador tal como vienen; no intente ser demasiado elegante, ya que es probable que rompa la accesibilidad, la navegación del teclado, el autocompletado y otras cosas que no tenía la intención de romper. Algo más que diseñar los bordes, el fondo y el relleno generalmente no es una buena idea. Puede pensar que lo es, pero es probable que pueda probar que está equivocado al mostrarle cómo rompió algún comportamiento predeterminado.
Por ejemplo, mostrar automáticamente un selector de tiempo desviaría la atención de lo que estaba haciendo el usuario. Tal vez el lector de pantalla estaba leyendo algún texto, o un usuario avanzado estaba navegando con el tabulador usando su teclado, y luego, de repente, están en el selector de tiempo cuando no querían estar.
- Use una biblioteca de interfaz de usuario ampliamente probada. Los autores de bibliotecas de interfaz de usuario populares han tenido en cuenta todos los comportamientos para proporcionar una experiencia fluida y predecible para los usuarios. Úselos cuando quiera hacer cosas como mostrar automáticamente un selector de fecha/hora o algún otro comportamiento elegante que probablemente no debería estar haciendo pero que de todos modos va a hacer.
Hagas lo que hagas, no intentes crear tus propios controles de formulario sofisticados. Te garantizo que cabrearás a uno de tus usuarios.
0
Si desea ver shadowDom en Chrome DevTools, debe activarlo en la sección Configuración en Elementos. No puede interactuar mediante programación con el elemento excepto a través de los atributos de los elementos y los controladores de eventos.
Esto debería hacer visible el shadowroot
Puede agregar detectores de cambios, entradas y eventos al componente en sí, pero no a los elementos de shadowDom.
0
Hay una manera de interactuar con doms de sombra abiertos con js puro, para cosas como hacer clic
Ejemplo:
document.querySelector("shadowRootsCss").shadowRoot.querySelector("#timeInput").click()
Si usa Google Chrome, inspeccione y encuentre el elemento, en ese elemento, haga clic en: copiar la ruta js
A continuación, tendrá la ruta en la que debe hacer clic.