javascript - Polymer: Using querySelector in Custom Element instead of "this.$." - Stack Overflow

admin管理员组

文章数量:1387339

Edit: Just found this link, that explains it somehow. Using querySelector to find nested elements inside a Polymer template returns null

Nonetheless I'd appreciate an answer to my question on this specific code.

/Edit

I think a rather straight forward and minimalistic problem:

I've got a custom element in polymer:

 <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>

The thing is, that I would rather use

 var button = document.querySelector(#button);

instead of

 var button = this.$.button;

Because it seems more intuitive and declarative. But whenever I do this I get an error that says:

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

 Firefox instead says: "TypeError: button is null"

So any help is appreciated! :)

Edit: Just found this link, that explains it somehow. Using querySelector to find nested elements inside a Polymer template returns null

Nonetheless I'd appreciate an answer to my question on this specific code.

/Edit

I think a rather straight forward and minimalistic problem:

I've got a custom element in polymer:

 <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>

The thing is, that I would rather use

 var button = document.querySelector(#button);

instead of

 var button = this.$.button;

Because it seems more intuitive and declarative. But whenever I do this I get an error that says:

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

 Firefox instead says: "TypeError: button is null"

So any help is appreciated! :)

• javascript
• polymer

Share Improve this question Follow edited Nov 8, 2014 at 22:34 Günter Zöchbauer 659k234234 gold badges2.1k2.1k silver badges1.6k1.6k bronze badges asked Nov 8, 2014 at 21:50 LoveAndHappinessLoveAndHappiness 10.2k2222 gold badges7474 silver badges107107 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Your button is inside your Polymer element and because Polymer elements have their content inside their shadow DOM the element can't be found this way. You can either use this.shadowRoot.querySelector('#button'); or document.querySelector('* /deep/ #button'); or document.querySelector('my-test::shadow #button'); if your <my-test> element is not within the shadow DOM of another element. /deep/ pierces through all shadow DOM boundaries ::shadow just through one.

Actually following line:

var button = document.querySelector(#button);

Should be:

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

Notice the quotes.

本文标签： javascriptPolymer Using querySelector in Custom Element instead of quotthisquotStack Overflow