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>