如何从 Polymer Element 操作内容答案

【问题标题】：How to manipulate content from the Polymer Element如何从 Polymer Element 操作内容
【发布时间】：2014-08-25 11:38:37
【问题描述】：

我正在创建一个顶栏聚合物元素，它将响应。

        <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，我只会发现它对我来说总是空白。

【问题讨论】：

标签： polymer web-component shadow-dom

【解决方案1】：

domReady 处理程序将在 DOM 处理完毕并准备好与之交互后触发。

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

【讨论】：