Question

修改：刚刚找到此链接，以某种方式解释了它。 Using querySelector to find nested elements inside a Polymer template returns null

尽管如此，我还是对这个特定代码的问题的答案表示感谢。

/修改

我认为这是一个相当直接和简约的问题：

我在聚合物中有一个自定义元素：

 <polymer-element name="my-test">
    <template>
        <div id="content">
            <h3 id="test">My Test</h3>
            <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolore consectetur, mollitia eos molestias totam ea nobis voluptatibus sed placeat, sapiente, omnis repellat dolores! Nihil nostrum blanditiis quasi beatae laborum quisquam ipsum!</p>
            <button id="button">Clicke Me!</button>
        </div>

    </template>
    <script>
    Polymer('my-test', {
        ready: function() {
            var button = this.$.button;
            button.addEventListener("click", function() {
                alert("alert");
            });
        }
    });
    </script>
</polymer-element>

问题是，我宁愿使用

 var button = document.querySelector(#button);

而不是

 var button = this.$.button;

因为它看起来更直观，更具说服力。但每当我这样做时，我都会收到错误消息：

 "Uncaught TypeError: Cannot read property 'addEventListener' of null " in Chrome and

 Firefox instead says: "TypeError: button is null"

所以任何帮助都表示赞赏！：）

Answer 1

您的按钮位于您的Polymer元素内部，因为Polymer元素的内容位于其shadow DOM中，因此无法通过这种方式找到元素。如果您的this.shadowRoot.querySelector('#button');元素不在另一个元素的影子DOM内，则可以使用document.querySelector('* /deep/ #button');或document.querySelector('my-test::shadow #button');或<my-test>。 /deep/只穿过一个阴影DOM边界::shadow。

Answer 2

实际上是以下行：

var button = document.querySelector(#button);

应该是：

var button = document.querySelector('#button');

注意引号。

Polymer：在Custom Element中使用querySelector而不是＆＃34; this。$。＆＃34;

2 个答案: