Comment interroger les éléments à l'intérieur de l'ombre DOM à partir de l'extérieur de Dart?

Comment puis-je sélectionner les nœuds à l'intérieur de l'ombre DOM? Considérons l'exemple suivant:

structure de "unshadowed" DOM

<app-element>
  #shadow-root
    <h2></h2>
    <content>
      #outside shadow
      <h2></h2>
    </content>
    <ui-button>
      #shadow-root
        <h2></h2>
  </ui-button>
</app-element>

index.html

<body>
<app-element>
  <!-- OK: querySelect('app-element').querySelect('h2') -->
  <!-- OK: querySelect('app-element h2') -->
  <!-- There is no problem to select it -->
  <h2>app-element > content > h2</h2>
</app-element>
</body>

templates.html

<polymer-element name="ui-button" noscript>
  <template>
    <!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') -->
    <h2>app-element > ui-button > h2</h2>
  </template>
</polymer-element>

<polymer-element name="app-element" noscript>
  <template>
    <!-- FAIL: querySelect('app-element::shadow').querySelect('h2') -->
    <!-- FAIL: querySelect('app-element::shadow h2') -->
    <!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') -->
    <h2>app-element > h2</h2>
    <content></content>
    <ui-button></ui-button>
  </template>
</polymer-element>

Dans les commentaires comme "OK: querySelect()" je montre les sélecteurs j'ai essayé de l'exécuter à partir de l'extérieur toute l'ombre DOM.

J'ai déjà lu l'article suivant: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru et repose sur le fait qu'il a été dit dans l'article, la requête comme: document.querySelector('app-element::shadow h2'); en JS devrait fonctionner comme prévu. Cependant dans Dart il ne fonctionne pas.

Que dois-je tort?

InformationsquelleAutor Timur Fayzrakhmanov | 2015-04-14
  1. 12

    Update2 (de commentaires)

    Si vous utilisez un principal personnalisé, s'assurer que le Polymère est correctement initialisé avant d'essayer d'interagir avec vos Polymère éléments (voir comment mettre en œuvre une fonction principale dans le domaine des polymères apps pour plus de détails).

    Habitude, je suggère d'éviter un principal personnalisé et créer un app-element (ou tout autre nom que vous préférez) et de mettre votre code d'initialisation dans attached (assurez-vous d'appeler super.attached();) ou dans ready() (n'a pas besoin de super appel).

    Original

    Il semble que dans ce cas, il n'est pas dans le shadow DOM, mais un enfant.

    Cela devrait fonctionner:

    querySelector('h2');

    C'est seulement dans l'ombre DOM quand il est à l'intérieur de vos éléments <template>...</template> pas quand vous la mettez dans la balise de votre élément personnalisé.

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

    Mise à jour

    Si vous voulez la recherche

    à l'intérieur de l'ombre DOM de l'élément courant

    shadowRoot.querySelect('h2');

    à l'intérieur de l'ombre DOM d'un élément à l'intérieur de l'ombre DOM

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

    de l'extérieur de l'élément courant

    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');
    • Où est votre querySelector... code? Dans la main, dans la AppElement classe, où, dans la classe?
    • À l'aide de CSS tout fonctionne comme prévu: sélecteur de pseudo comme ::shadow et combinator /deep/ affecter les éléments. Cependant, il n'a pas de sens lorsque j'utilise Dart querySelect(All) fonctions. Seulement h2 à l'intérieur de <content> balise est accessible. Quel est le problème?
    • Code de la main() {}
    • ::shadow et /deep/ ont été supprimées en Chrome 63.
    InformationsquelleAutor Günter Zöchbauer
  2. 19

    Pseudo-sélecteur de ::shadow et combinator /deep/ ne fonctionne pas sur firefox.

    Utilisation .shadowRoot

    var shadowroot = app-element.shadowRoot;
shadowroot.querySelector('h2');
    • Et elles ont été supprimées en Chrome 63.
    InformationsquelleAutor Aniruddha