Puis-je accéder au DOM shadow en utilisant jQuery?

J'ai défini un composant polymère comme ceci:

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

Maintenant je veux accéder à l'ombre dom, par exemple: pour obtenir le contenu de la div id= "test"

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

Le code donné ne fonctionne pas.
Puis-je accéder à l'ombre du dom avec jquery?

source d'informationauteur mica

  1. 18

    Non, pas à l'extérieur du Polymère élément.

    Après la lecture du Polymère, il semble que vous ne pouvez avoir accès qu'à l'ombre-DOM de Polymère éléments dans les scripts dans le Polymère de l'élément. Le Polymère docs sur Automatique nœud trouver dire:

    Chaque nœud dans un composant du shadow DOM qui est étiqueté avec un attribut id est automatiquement référencé dans la composante de cela.$ de hachage.

    Cela signifie que vous pouvez ajouter un <script> balise comme un frère à <template> où this.$.test sera l'élément que vous souhaitez.

    <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>
  2. 10

    Vous pouvez utiliser $('body /deep/your-selector') modèle de percer au travers de l'ombre DOM et obtenir Jquery pour fonctionner à l'intérieur.

    mise à jour: pour l'instant j'ai seulement réussi à faire ce travail sur chrome pour bureau. Je crois, les autres navigateurs ne prennent pas en charge le /de profondeur/combinator.

    mise à jour 2: /deep/ combinator est obsolète et ne doit pas être utilisé plus. Il est prévu pour être retiré de Chrome.

  3. 4

    Je pense que cela fonctionne pour moi...

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

    Uniquement testé sur chrome si

  4. 1

    J'ai écrit simple helper en caractères d'imprimerie pour résoudre ce problème: 

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

    Utilisation:

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

    Testé sur desktop, google Chrome, Internet Explorer, Firefox