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

语境：

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

问题：

假设我们有一个名为x-foo的Web组件,需要访问另一个x-randgen.后一个组件公开了前者使用的业务方法.为了避免两个组件之间紧密耦合的通信,我想使用x-foo中的发现机制通过跨DOM和Shadow DOM模型的搜索过程来访问x-randgen.特别是我确定了两种可能的情况.实例化的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>>;
       }
    });

题：

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

解决方法:

你可以写这样的问题函数：

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

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

可以使用单稳态模式(稀有)或适当的控制器(通用)来制作其他解决方案.

单一的想法是特定元素表达到共享状态的管道(即最大值).只要您需要访问共享状态,只需创建一个访问者元素即可.

控制器的想法是元素冒泡请求randgen实用程序的事件.一些祖先(控制器)处理事件并提供资源.这是一种依赖管理,非常适合设计灵活性.

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

标签：javascript,dom,polymer,web-component,shadow-dom
来源： https://codeday.me/bug/20190528/1173801.html