聚合物-如何获得在其阴影中包含我的组件的组件-DOM？

Question

如果我的组件被显式地放在了另一个shadow-dom组件中，如何获取这个组件呢？

例如：

​

Answer 1

当你被放入父元素的阴影DOM中时，下面是一个获取父元素的通用方法。我没有添加任何错误检查，但如果你知道你在他们的阴影下，那么这就很好用了。

​

class OuterEl extends HTMLElement {
        constructor() {
          super();
          var root = this.attachShadow({mode:'open'});
          root.innerHTML = "<inner-el></inner-el>";
        }
      }

      class InnerEl extends HTMLElement {
        constructor() {
          super();
          var root = this.attachShadow({mode:'open'});
          root.innerHTML = `<button>Click</button><hr/><output></output>`;
          this.button = root.querySelector('button');
          this.output = root.querySelector('output');
          this.button.addEventListener('click', () => {
            let parentSrc = this.getRootNode();
            this.output.textContent = parentSrc.host.outerHTML;
          })
        }
      }

      customElements.define('outer-el', OuterEl);
      customElements.define('inner-el', InnerEl);
    </script>

<outer-el></outer-el>

​

神奇之处在于这个调用：

this.getRootNode().host

这将是具有您的组件所在的阴影DOM的元素。