Question

我在访问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

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

Answer 1

关于您的元素的第一个问题是您的connectedCallback没有＆＃34;转发＆＃34;致super的电话。这应该是你方法中的第一件事，所以它会成为：

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

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

除非在设置这些值时存在一些复杂性，我猜你应该没问题，只需在最短的时间内延迟调用，但将其包含在setTimeout中，而不包含第二个参数。事实上，connectedCallback实际上是：

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

现在第三个问题是this.$＆＃34;快捷方式＆＃34;不适用于有条件地添加到页面中的元素。因此，您应该使用querySelector，就像您说的那样，或者getElementById，例如：

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

如何从shadow-DOM获取元素

1 个答案: