Question

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

记录的结果全部为空。但是当页面完全准备好后，我输入document.querySelector（'html / deep / .edit'）并且它可以工作。如何在聚合物元素内成功querySelector 这种情况发生在路由器中的角度模板中。

Answer 1

您可以使用：

this.shadowRoot.querySelector();

或者对于具有ID的元素，您可以使用automatic node finding：

this.$.elementId;

Answer 2

在聚合物元素中使用this.$.id来选择元素中的内容

如何在聚合物中的custom-element中成功querySelector

2 个答案: