Access to the parent context of the web component, which is either the DOM or the Shadow DOM

Question

Context:

I run tests on the composition of web components in different contexts. In particular, I am trying to link several web components by accessing one of them from another process of searching for DOM/ Shadow DOMcomponents involved.

Problem:

Suppose we have a web component with a name x-foothat requires access to another x-randgen. The last component reveals the business methods used by the first. To avoid a tight connection between the two components, I would like to use the detection mechanism in x-footo access x-randgenthrough the search process by DOMand models Shadow DOM. In particular, I identify two possible scenarios. Both copies x-fooand x-randgencreated in a global context (index.html), or both of them are displayed in a different template, for example x-bar. The problem is that the search process must be implemented differently in each case. After that, I show a pseudo-code with my approach, summarizing, in essence, my question. (A global example can be found here: http://jsbin.com/qokif/1/)

    Polymer('x-foo', {
       ...
       getRandGen: function () {
          if (<<x-foo & x-randgen are in the global context>>)
             return document.querySelector('x-randgen');
          else if (<<x-foo & x-randgen are in a template>>)
             return <<the x-randgen tag within the template>>;
       }
    });

Question:

, - Polymer.

Answer 1

:

    getRandGen: function () {
      var root = this;
      while (root.parentNode) {
        root = root.parentNode;
      }
      return root.querySelector('x-randgen');
    }

http://jsbin.com/xufewi/1/edit

() ().

, (.. max). , .

, , randgen. () . , .

http://jsbin.com/tudow/1/edit

Answer 2

jsbin. -, domReady, ready, getRandGen() , DOM. , x-randgen, , x-foo domReady ( , x-randgen , .

, document.querySelector('x-randgen') <x-randgen> ShadowDOM.

. " " " " . <template> , . dom , , . , , .

, , , x-randgen , , : document.querySelector('x-randgen') || document.querySelector('body /deep/ x-randgen'). JSBin: http://jsbin.com/goqikire/1/edit

, , x-randgen x-foo, , , , x-randgen x-foo, .