如何从 shadow-DOM 中获取元素答案

【问题标题】：How to get element from shadow-DOM如何从 shadow-DOM 中获取元素
【发布时间】：2018-05-23 00:42:09
【问题描述】：

我在访问shadow-root 时遇到问题。我需要得到img，但它不起作用。这是我的页面：

<link rel="import" href="/frontend/src/ui/breadcrumb.html">
<dom-module id="bread-crumb">
    <template>
        <style include="breadcrumb"></style>
        <div id="wrapper">
            <template is="dom-if" if="{{pageInfo.title}}">
                <div class="left">
                    <img id="img" src$="{{pageInfo.icon}}">
                    <span>{{pageInfo.title}} <strong>{{pageInfo.part}}</strong></span>
                </div>
            </template>
            <div class="links">
                <template is="dom-repeat" items="[[links]]">
                    <a class$="{{_getSelected(item.selected)}}" href$="{{item.link}}"> {{item.title}} </a>
                </template>
                <!-- <template is="dom-if" if="{{item.title}}">
                    <a href$=""
                </template> -->
            </div>
        </div>
    </template>
    <script>
    class BreadCrumb extends Polymer.Element {
        static get is() {
            return 'bread-crumb'
        }
        _getSelected(selected){
            return selected ? "selected" : "";
        }

        connectedCallback() {
            this._imageHide();
        }

        _imageHide() {
            let image = this.$.img;
            if(image.src == null || image.src == undefined)
                image.classList.add("hidden");
        }
    }

    customElements.define(BreadCrumb.is, BreadCrumb);
    </script>
</dom-module>

我也试过这个let image = this.shadowRoot.querySelector('#img');，但它也不起作用。上面会抛出一个错误：

Cannot read property 'img' of undefined

我尝试了其他方式 let image = this.shadowRoot.querySelector('#img'); 这给了我：

Cannot read property 'querySelector' of null

我做错了什么？有什么建议吗？

【问题讨论】：

标签： polymer-2.x

【解决方案1】：

关于您的元素的第一个问题是您的connectedCallback 没有“转发”对super 的调用。这应该是你方法中的第一件事，所以它会变成：

  connectedCallback() {
    super.connectedCallback();
    this._imageHide();
  }

我猜你只是从你的代码中跳过了一部分，pageInfo.title 实际上是一个真实的值。但是由于我不知道这些值是何时/如何设置的，我猜测另一个问题可能是 _imageHide 方法从 connectedCallback 运行，并且实际上将标签标记到页面中可能还为时过早.

除非在设置这些值时存在一些复杂性，否则我猜你应该可以通过简单地延迟调用尽可能短的时间，但将其包装在 setTimeout 中而不使用第二个参数。所以实际上connectedCallback 会是：

  connectedCallback() {
    super.connectedCallback();
    setTimeout(() => {
      this._imageHide();
    });
  }

现在第三个问题是this.$“快捷方式”不适用于有条件地添加到页面中的元素。所以你应该使用querySelector，就像你说的那样，或者getElementById，比如：

let image = this.shadowRoot.getElementById('img');

【讨论】：