CODEWITHSUNDEEP
javascriptpolymer
木士羽
木士羽

Reputation: 175

how can I querySelector successfully in custom-element in polymer

<polymer-element name="paper-list" layout vertical relative>
<template>
    <style>
    </style>
    <content ></content>
</template>
<script>
    Polymer({
        publish :{
            data : null
        },
        observe :{
            'data data.length' : 'init'
        },
        ready : function (){
            if (!this.template){
                this.template = this.querySelector('template');
            }
        },
       domReady : function (){
           console.log('domReady - ', this.querySelector('.edit');
       },
       attached: function (){
           console.log('attached- ', this.querySelector('.edit');
       },
       created: function (){
           console.log('created- ', this.querySelector('.edit');
       }
    });
</script>
</polymer-element>
<paper-list data="{{data}}" id="list">
        <template>
            <div class="item" layout horizontal >

                <paper-menu-button >
                    <paper-icon-button icon="more-vert"></paper-icon-button>
                    <paper-dropdown class="dropdown" halign="right">
                        <core-menu class="menu">
                            <paper-item class="edit"><core-icon icon="create"></core-icon>edit</paper-item>

                        </core-menu>
                    </paper-dropdown>
                </paper-menu-button>
            </div>
        </template>
    </paper-list>

The results logged are all null. But when the page is ready completely, I type document.querySelector('html /deep/ .edit') and it works. How can I querySelector successfully inside the polymer-element This situation happens in angular template in router.

Upvotes: 0

Views: 1141

Answers (2)

Walid Ammar
Walid Ammar

Reputation: 4126

You can use:

this.shadowRoot.querySelector();

Or for elements with an ID, you can use automatic node finding:

this.$.elementId;

Upvotes: 2

jimi dough10
jimi dough10

Reputation: 2016

inside polymer elements you use this.$.id to select your things inside the element

Upvotes: 1

Related Questions