Accessing the parent context of a web component being either DOM or Shadow DOM

dom, javascript, polymer, shadow-dom, web-component

Solution

You could write your problem function like this:

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

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

Other solutions can be made using monostate pattern (rare) or a proper controller (common).

The monostate idea is that a particular element expresses a conduit to a shared-state (i.e. the `max` value). Wherever you need access to the shared-state, you simply create one of the accessor elements.

The controller idea is that the element bubbles an event requesting the `randgen` utility. Some ancestor (the controller) handles the event and provides the resource. This is a type of dependency management that's great for design flexibility.

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

Problem

Context: I am carrying out tests about web component composition in different contexts. Particularly I am trying to relate several web component by getting access to one of them from another one by a searching process within the `DOM` / `Shadow DOM` of the involved components. Problem: Let's suppose we have a web component named `x-foo` requiring to access another one `x-randgen`. The latter component exposes business methods used by the former. In order to avoid a tightly coupled communication between both components I would like to use a discovery mechanism in `x-foo` to access `x-randgen` through a searching process across `DOM` and `Shadow DOM` models. In particular I identify two possible scenarios. Either both `x-foo` and `x-randgen` instantiated are in the global context (index.html) or they both appear within another template, say `x-bar`. The problem is that the searching process should be implemented differently in each case. Following I show a pseudocode with my approach summarizing, in essence, my question. (The 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: I would appreciate if someone could reformulate the snippet above in proper terms according to the Polymer technology.

Original source