Polymer：在自定义元素中使用 querySelector 而不是“this.$”。

Question

编辑：刚刚找到这个链接，它以某种方式解释了它。 使用 querySelector 查找 Polymer 模板内的嵌套元素返回 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 元素的内容位于其影子 DOM 内，因此无法通过这种方式找到该元素。如果您的元素不在另一个元素的影子 DOM 内，您可以使用this.shadowRoot.querySelector('#button');ordocument.querySelector('* /deep/ #button');或。仅穿过一个边界即可穿透所有影子 DOM 边界。document.querySelector('my-test::shadow #button');<my-test>/deep/::shadow