Question

我正在创建顶部条形聚合物元素，它将响应。

        <top-menu query="max-width: 500px">
            <a href="#">What ToDo</a>
            <a href="#">Where ToDo</a>
            <a href="#">Add ToDo</a>
        </top-menu>

我想在菜单项中添加额外的样式。

<polymer-element name="top-menu" attributes="query" noscript>
<template>
    <link rel="stylesheet" href="top-menu.css">

        <template if="{{smallScreen}}">
            <core-menu-button icon="menu"
                              inlineMenu halign="left" valign="bottom">
                <content></content>
            </core-menu-button>
        </template>
        <!-- ...otherwise display them in the toolbar -->
        <div id="topMenuItem"><content></content></div>

    <core-media-query
            query="{{query}}"
            queryMatches="{{smallScreen}}">
    </core-media-query>

</template>
<script>
    Polymer('top-menu', {
        attached: function() {
            debugger;
            var menus = this.$.topMenuItem.firstChild;

            menus.forEach(function(menu){
                var shadow = menu.createShadowRoot();
                shadow.innerHTML = '<paper-button label="flat button"><content></content></paper-button>';
            })
        }
    });
</script>

我面临的问题我无法找到任何正确的元素生命周期方法，我可以在其中获取内容。如果我搜索 this。$。topMenuItem.firstChild 我只觉得它对我来说是空白的。

Answer 1

处理完DOM后，domReady处理程序将会触发，并准备好与您进行交互。

请注意，要获取<content>元素的内容，必须在其上调用.getDistributedNodes()。

如何操作Polymer Element中的内容

1 个答案: