Polymer 如何操纵聚合物元素的含量

Polymer 如何操纵聚合物元素的含量,polymer,web-component,shadow-dom,Polymer,Web Component,Shadow Dom,我正在创造一个顶部酒吧聚合物元素,这将是响应 我想给菜单项添加额外的样式 <polymer-element name="top-menu" attributes="query" noscript> <template> <link rel="stylesheet" href="top-menu.css"> <template if="{{smallScreen}}"> <core-menu-b

我正在创造一个顶部酒吧聚合物元素,这将是响应

我想给菜单项添加额外的样式

<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>
我所面临的问题是,我找不到任何合适的元素生命周期方法来获取元素的内容。如果我搜索这个$.topMenuItem.firstChild,我只会发现它对我来说一直是空的。

一旦DOM被处理并准备好与它交互,domReady处理程序就会启动

请注意,要获取元素的内容,必须调用它

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