一个简单的嵌套polymer-element在另一个内部将不会显示:
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
INDX-grid.html
<polymer-element name="indx-grid">
<template>
<style>
@host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
INDX-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
@host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
奇怪的是,虽然我可以在Chrome和CSS属性中的开发人员工具中看到它都是正确的,但在使用Chrome开发工具检查时,该元素将无法显示,甚至没有"大小工具提示".
有人对此问题有任何疑问吗？
谢谢
你需要<content> 1把<indx-griditem>("轻DOM")引入到<indx-grid>影子DOM中.
演示:http://jsbin.com/eRimiJo/2/edit
额外提示:您也可以使用noscript不设置原型的Polymer元素(例如,只调用Polymer('element-name');