访问Web组件的父上下文是DOM或Shadow DOM

Question

语境:

我正在不同的环境中进行有关Web组件组成的测试.特别是我试图通过在所涉及的组件内DOM/ 通过搜索过程从另一个访问其中一个组件来关联多个web Shadow DOM组件.

问题:

假设我们有一个名为x-foo要求访问另一个的Web组件x-randgen.后一个组件公开了前者使用的业务方法.为了避免两个组件之间紧密耦合的通信,我想使用发现机制x-foo来x-randgen通过搜索过程DOM和Shadow DOM模型进行访问.特别是我确定了两种可能的情况.要么都有x-foo和x-randgen实例都在全球范围内(index.html的),或者他们都出现另一个模板内,说x-bar.问题是搜索过程应该在每种情况下以不同的方式实现.接下来,我用我的方法总结了一个伪代码,实质上是我的问题.(全球范例可以在这里找到: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>>;
       }
    });

题:

如果有人可以根据聚合物技术以适当的方式重新制作上面的片段,我将不胜感激.

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