javascript - data - ¿Puedo acceder al DOM de la sombra usando jQuery?

jquery get attribute value

Question

Definí un componente con polímero como este:

<polymer-element name="my-component">
  <template>
    <div id=''test''>CONTENT</div>
  </template>
</polymer-element>

Ahora quiero acceder al dominio de la sombra, por ejemplo: para obtener el contenido de div id = ''test''

var x = $("div#test").html();

El código dado no funciona. ¿Puedo acceder a la sombra dom con jQuery?

Answer 1

Creo que esto funciona para mí ...

$(''polymer-element::shadow #test'')

Aunque solo lo probé en cromo

Answer 2

Escribí ayuda simple en TypeScript para resolver este problema:

class DomUtils {

    public static getShadowElementById(id: string):any {

        try {
            // Try to get it by simple id in case of browser doesn''t support shadow DOM
            var element = $("#" + id);

            if (element.length <= 0) {
                // Support Chrome browser
                element = $("body /deep/ #" + id);
            }

            return element;

        } catch (error) {
            console.log("Error: " + error + ", while trying to get shadow element with id: " + id);
            return null;
        }
    }
} 

Uso:

var element = DomUtils.getShadowElementById(''mainContainer'');

Probado en el escritorio de Chrome, Internet Explorer, Firefox

Answer 3

No, no fuera del elemento Polymer.

Después de leer sobre Polymer, parece que solo se puede tener acceso al DOM en la sombra de los elementos Polymer en los scripts dentro del elemento Polymer. Los documentos de Polymer sobre la búsqueda automática de nodos dicen:

Cada nodo en el DOM de la sombra de un componente que está etiquetado con un atributo de identificación se referencia automáticamente en este componente. $ Hash.

Esto significa que puede agregar una etiqueta <script> como un hermano para <template> donde this.$.test será el elemento que desea.

<polymer-element name="my-component">
  <template>
    <div id=''test''>CONTENT</div>
  </template>
  <script>
    Polymer(''my-component'', {
        logNameValue: function () {
            console.log(''polymer element'', this.$.test);
            console.log(''jQuery wrapper of polymer element'', $(this.$.test));
        }
    });
  </script>
</polymer-element>

Answer 4

Puedes usar el patrón $(''body /deep/ your-selector'') para perforar el DOM de la sombra y hacer que Jquery trabaje dentro de él.

actualización : Hasta ahora solo he logrado hacer que esto funcione en Chrome para escritorio. Creo que otros navegadores no admiten el / deep / combinator.

actualización 2 : /deep/ combinator está en desuso y no debe utilizarse más. Está programado para ser eliminado de Chrome.