Saltar al contenido

¿Cómo consultar elementos dentro de Shadow DOM desde afuera en Dart?

Solución:

Pseudo selector ::shadow y combinador /deep/ no funciona en firefox.

Usar .shadowRoot

var shadowroot = app-element.shadowRoot;
shadowroot.querySelector('h2');

Update2 (de los comentarios)

Si utiliza una función principal personalizada, asegúrese de que Polymer se haya inicializado correctamente antes de intentar interactuar con sus elementos de Polymer (consulte cómo implementar una función principal en aplicaciones de polímero para obtener más detalles).

Normalmente sugiero evitar un main personalizado y crear un app-element (o el nombre que prefiera) y ponga su código de inicialización en attached (asegúrate de llamar super.attached();) o en ready() (no necesita la súper llamada).

Original

Parece que en este caso no está en la sombra DOM sino un niño.

Esto debería funcionar:

querySelector('h2');

Solo está en la sombra DOM cuando está dentro de sus elementos <template>...</template> no cuando lo envuelve en la etiqueta de su elemento personalizado.

<polymer-element name="some-element">
  <template>
    <!-- this becomes the shadow DOM -->
    <content>
     <!-- 
       what gets captureD by the content element becomes a child or some-element
       -->
     </content>
  </template>
</polymer-element>
<body>
  <some-element>
    <!-- these elements here are captured by the 
         content tag and become children of some-element -->
    <div>some text</div>
  </some-element>
</body>

Actualizar

Si quieres buscar

dentro de la sombra DOM del elemento actual

shadowRoot.querySelect('h2');

dentro del DOM de sombra de un elemento dentro del DOM de sombra

shadowRoot.querySelector('* /deep/ h2');
shadowRoot.querySelector('ui-button::shadow h2');

desde fuera del elemento actual

import 'dart:html' as dom;
...
dom.querySelector('* /deep/ h2');
// or (only in the shadow DOM of <app-element>)
dom.querySelector('app-element::shadow h2');
dom.querySelector('app-element::shadow ui-button::shadow h2');
// or (arbitrary depth)
dom.querySelector('app-element /deep/ h2');
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *