访问Web组件的父上下文是DOM或Shadow DOM [英] Accessing the parent context of a web component being either DOM or Shadow DOM

问题描述

上下文：

我正在不同的上下文中进行Web组件组合的测试。特别是我试图通过在 DOM / Shadow DOM 中的搜索过程访问其中一个Web服务组件， code>相关组件。

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.

问题：

我们假设我们有一个名为 x-foo 需要访问另一个 x-randgen 。后一个组件暴露了前者使用的业务方法。为了避免两个组件之间的紧密耦合的通信，我想使用 x-foo 中的发现机制来访问 x-randgen 通过 DOM 和 Shadow DOM 模型中的搜索过程。特别是我识别两种可能的情况。实例化的 x-foo 和 x-randgen 都在全局上下文（index.html）中，或者它们都出现在另一个模板中，说 x-bar 。问题在于，每种情况下，搜索过程应该不同。下面我用我的方法显示一个伪代码，本质上是我的问题。 （全球范例可以在这里找到： http://jsbin.com/qokif/1/ ）

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>>;
       }
    });

问题：

有人可以根据聚合物技术在适当的条件下重新形成上面的片段。

I would appreciate if someone could reformulate the snippet above in proper terms according to the Polymer technology.

推荐答案

你可以这样写你的问题功能：

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

单稳态的想法是，一个特定的元素表达了共享状态的渠道（即 max 值） 。无论您需要访问共享状态，只需创建一个访问元素。

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.

控制器的想法是，元素会冒泡一个事件，请求$ code> randgen 实用程序。一些祖先（控制器）处理事件并提供资源。这是一种对设计灵活性很好的依赖关系管理。

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

这篇关于访问Web组件的父上下文是DOM或Shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！