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